Javascript variable created with get() in firestore document field

Question

I need to feed a variable the contents of the field "site" of the document pre-selected in a collection "restaurants" in the Firestore, to then provide the hyperlink of the site with the tag <a>. The problem is that the variable x is always empty. Follows part of the code:

<div class="details">
                   <span class="light">●</span>
                   <span data-fir-content="fone"></span>
                   <span class="black">●</span>
                   <span id="site" data-fir-content="site">
</div>
<script>
    var x = db.collection("restaurants").where("site", "==", true).get("site");
    var orderlink = x;
</script>
<a style="font-size:large;align-content:center" href="http://" onclick="location.href = this.href + orderLink; return false;">
    Ir para o Site 
</a>

Answer 1

I cannot guarantee that your query is returning the expected result, but the problem I see in the example is that you are performing an input/output operation, and you are not waiting for the resolution of this operation.

Understand that Javascript runs in a single Thread, which means that Javascript cannot perform operations in parallel.

If you were to wait for the resolution of get, your program would be locked until you received all content from Firestore, But most of the time your program is pending. This time could be used to execute other commands and improve the experience of users, so this type of operation is always done asynchronously.

So in your case, from the Firestore API, you can see that the method get returns a Promise. You can use the method then of Promise to pass a callback that will be invoked when the input/output operation is completed. This code is not executed sequentially, it will be invoked eventually:

var orderlink = '';
db.collection("restaurants").where("site", "==", true).get("site").then(x => {
    orderlink = x;
})

Improving:

Since the "link" will only be valid after the callback is invoked, you could leave your anchor <a> disabled, without onclick, and then add Handler from that event as soon as your reply from Firestore return:

<script>
    db.collection("restaurants").where("site", "==", true).get("site").then(x => {
        document.getElementById('firestore-link').onClick = () => {
            location.href = 'http://' + x; 
            return false;
        }
    })
</script>

<a id="firestore-link" style="font-size:large;align-content:center" href="#">
    Ir para o Site 
</a>