How can make my Program wait for Firebase's data before executing a function?

Question

I'm a beginner in Next.js and Firebase. I was trying to make a log in system that has roles. I used Firebase Authentication and stored the account's roles on firestore. I connected the authentication account and firestore data by using the UID (from authentication) as the Firestore Document ID.

Ps. I'm not sure if this is the best way to do this but I am able to fetch data from a field by looking for the Document ID fetched using the UID.

What I need to happen is to get the role of the Account from the Firestore and use that for a function to push the correct page for that account type. The problem is, my pushToPage() fires first before my getData() gets the information it asks for from the firestore.

This is the LogIn function. I used auth.onAuthStateChanged to get the UID of the user.

var firebaseDocument = ' ';
var accountType = '';
var databaseRef = '';


function LogIn() {
    signInWithEmailAndPassword(auth, email, password)
      .then((response) => {
        sessionStorage.setItem('Token', response.user.accessToken);

        auth.onAuthStateChanged((user) => {
          if (user) {
            firebaseDocument = user.uid;
            databaseRef = doc(database, 'users', firebaseDocument);
          } else {
            console.log('user logged out');
          }
        });
      })
      .catch((err) => {
        console.log(err.code);
      });

    accountType = getData();
    pushToPage(accountType);
  }

This is the getData function where it fetches the account role

const getData = async () => {
    try {
      const docSnap = await getDoc(databaseRef);
      if (docSnap.exists()) {
        return docSnap.data().account_type;
      } else {
        console.log('Document does not exist');
      }
    } catch (e) {
      console.log(e);
    }
  };

this is the pushToPage function that reads the var accountType value to decide on what page to go.

const pushToPage = (accountType) => {
    if (accountType == 'management') {
      router.push('/accounts/management');
    } else if (accountType == 'dean') {
      router.push('/accounts/deans');
    } else {
      router.push('/accounts/faculty');
    }
  };

Running this code does not only make my Program wait for the firebase response but also displays this error

Unhandled Runtime Error
FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

I didn't use collection() though.

Also, I searched for similar problems and I think I need to place a .then() function somewhere or somekind of Asynchronous Programming technique. Unfortunately, I struggle in understanding these.

I hope I can find help here. Thanks guys.

Answer 1

I don't think I need the .then() function anymore. I just called the pushToPage() inside the getData.

const getData = async () => {
    try {
      const docSnap = await getDoc(databaseRef);
      if (docSnap.exists()) {
        accountType = docSnap.data().account_type;
        pushToPage(accountType);
      } else {
        console.log('Document does not exist');
      }
    } catch (e) {
      console.log(e);
    }
  };