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>
 );
}