.then is run before promise is returned, why?

I have an async func getUserData() which gets user data from Firestore. Within a .then() block after the data is received from Firestore, I return the data. This should be the resolved promise right? But the caller of getUserData() is running its own .then() before my async function returns, so the value is undefined. What’s going on here?

Heres my async function:

async function getUserData(uid: any) {
    let db = firebase.firestore();
    let myUserData = db.collection("users").doc(uid);
    myUserData.get().then((doc: any) => {
        if (doc.exists) {
            let documentData = doc.data().tags
            let myUserData: userDataType = {};
            myUserData.tags = Object.keys(documentData).map(key =>
                <IonItem>
                    <IonLabel>{key} : {documentData[key]}</IonLabel>
                </IonItem>
            )
            // setUserData(myUserData);
            console.log("Here 1: ", myUserData);
            return myUserData;
        } else {
            // doc.data() will be undefined in this case
            console.log("No such document!");
        }
    }).catch((error: any) => {
        console.log("Error getting document:", error);
    });
}

And here’s its caller:

useEffect(() => {
        getUserData(uid).then((p) => console.log("Here 2: ", p))
    }, []);

See the console.log() statements for “Here 1” and “Here 2”. Why is “Here 2” being logged first??? This is causing my data to not display.

Here 2:  undefined
Here 1:  {tags: Array(3)}

Answer

To resolve this issue, change your function to return the inner promise (myUserData.get()).

let db = firebase.firestore();
    let myUserData = db.collection("users").doc(uid);
    // >>>> return the promise here
    return myUserData.get().then((doc: any) => {