为什么 async await 在这个 function 中不起作用？

Question

This might be a bit of a beginner question, but I can't figure this out:

I'm doing an asyncronous database call in which I want to get an object from the database and asign this object to the window object (window.naamID).

Next I want to run a function where I use the object assinged to the window object (making it global) and use it as a database query (.where("Vraagsteller", "==", naamID)).

The problem, of course, is that the second function starts running before the first function has fnished (because of it's asyncronous nature).

I wanted to overcome this problem by wrapping the second function in a syncronous function and await the first function.

This doesn't seem the work. The console says the object asigned to the window object is undefined.

This is the code:

 function constructAuthMenu(){
auth.onAuthStateChanged(User =>{

    const userRef = db.collection("Vitaminders")
    .doc(User.uid);
    userRef.get()
    .then(function(doc) {

        const naamID = doc.data().Gebruikersnaam;
        const ID = doc.data().ID
        const naam = naamID.replace(ID, "")
        const profilePic = doc.data().Profielfoto

        window.naamID = naamID
     });
  });
}; 

constructAuthMenu()

 async function getNewReactions(){

        await constructAuthMenu()

      db.collectionGroup("Reactions")
      .where("Vraagsteller", "==", naamID)
      .where("New", "==", 
       "Yes").get().then(querySnapshot => {
        querySnapshot.forEach(doc => {

       *Do stuff*

   });
});

What am I doing wrong? Or doesn't async await work like this?

Answer 1

If constructMenuFunction actually exists elsewhere in your code, and returns a Promise, then your problem is that you're missing parentheses on your function call: await constructMenuFunction();

If constructMenuFunction does not exist elsewhere in your code, and the first function preceding the async function is actually what you wish to invoke, your problem is that the first function does not return a Promise and your async function invokes the wrong method and without parentheses.

async function constructAuthMenu() {
  return await auth.onAuthStateChanged(async User => {
    try {
      const userRef = db.collection("Vitaminders").doc(User.uid);
      const doc = await userRef.get();
      const naamID = doc.data().Gebruikersnaam;
      const ID = doc.data().ID;
      const naam = naamID.replace(ID, "");
      const profilePic = doc.data().Profielfoto;
      return naamID;
    } catch(err) {
      console.error(err);
    }
 });
};