I am having an issue when trying to retrieve data from Firestore using the Firebase JS SDK

I am having an issue when trying to retrieve data from Firestore using the Firebase JS SDK. I am receiving the following error:

TypeError: firebase_firestore__WEBPACK_IMPORTED_MODULE_3__.getDoc(…).data is not a function

I am trying to load the data using the following code:

useEffect(() => {
    const getAuthorData = async () => {
        setAuthorData(
            await getDoc(doc(db, 'users', post.data.author)).data()
        )
    }
    const p = getAuthorData()
    console.log(p)
}, [])

I think have imported the necessary Firebase modules and initialized the app with the correct configuration. I have also checked that the getDoc function is returning a Firestore DocumentSnapshot object, but the data() method is not a function. Some data is showing behin the error

I would like to know if there is a problem with my code or if I am missing something else.

Any help would be appreciated, thanks!

>Solution :

The problem is that getDoc returns an object that does not have a method called data. It returns a promise. Your code right now is trying to call data() on that promise instead of first awaiting it. If you are trying to keep this at one line of code, you will have to force the await to happen first before the call to data() by using parenthesis:

(await getDoc(doc(db, 'users', post.data.author))).data()