getDoc values Firebase React

This should honestly be the simplest thing. I’ve got a UserPage in my React project. The job is simple, to see and edit values in firebase. Ive got the edit portion working but the read isn’t returning any values.

as you can see I’ve got a collection called “users”. Within the collection, each doc is named the ID of the user. The data within each doc, is what I’m trying to return and display upon page load: data labeled as phoneNo, and title. (A little note, using asynchronous / await seems to cause the page not to render. not sure if that’s potentially the issue. – the same with trying: userData.data()

Of course, the displayName, userId, and email show up in the Dom because they are direct attributes of the user object, so I know I’ll need to change the JSX values for Phone Number and Title, but it’s giving me trouble as to how. Thanks!

Here’s an excerpt:

export default function UserPage() {
 const auth = getAuth()
 const fireUser = auth.currentUser

 // a few of the things I've tried:
   // const docRef = doc(db, 'users', `${fireUser}`)
   // const docSnap = getDoc(docRef)
   // console.log(docSnap)
   // const userData = doc(db, `users`, `${fireUser}`)
   // const userData = doc(db, `users/${fireUser}`)
   // console.log(userData)


return (
 <section>
   {user && 
     <div>
      <h1>My Details</h1>
      <ul>
        <li>
          <label className="col">
            <div className="row">
              <p className="bold" >DisplayName: </p>
              <p>{user.displayName}</p>
              {/* <button>edit</button> */}
            </div>
          </label>
          <label>
            <div className="row">
              <p className="bold" >UserID: </p>
              <p>{user.uid}</p>
            </div>
          </label>
          <label>
            <div className="row">
              <p className="bold" >Email: </p>
              <p>{user.email}</p>
            </div>
          </label>
          <label>
            <div className="row">
              <p className="bold" >Phone Number: </p>
              <p>{user.phoneNo}</p>
              {/* <button>edit</button> */}
            </div>
          </label>
          <label>
            <div className="row">
              <p className="bold" >Title: </p>
              <p>{user.title}</p>
              {/* <button>edit</button> */}
            </div>
          </label>
        </li>
      </ul>
      <UserForm />
    </div>}
  </section>
 );
}

Answer

You need to use useEffect and setState to be able to render your data. Also, Firebase Firestore is Asynchronous in nature, as a general note, no one should be trying to convert an Async operation into a sync operation as this will cause problems. You need to use an Asynchronous function to fetch data from Firestore. See sample code below:

import {useState, useEffect} from 'react'

const [user, setUser] = useState([])
const auth = getAuth()
const fireUser = auth.currentUser

const getUserdetails = async () => {
  const docRef = doc(db, "users", fireUser)
  const docSnap = await getDoc(docRef)
  
  if (docSnap.exists()) {
    // console.log("Document data:", docSnap.data())
    setUser(docSnap.data())
  } else {
    // doc.data() will be undefined in this case
    console.log("No such document!")
  }
}

useEffect(() => {
  getUserdetails()
}, [])

For more information, you may check Get data with Cloud Firestore.