getDoc 值 Firebase React

Question

老实说，这应该是最简单的事情。我的 React 项目中有一个 UserPage。工作很简单，就是在 firebase 中查看和编辑值。我的编辑部分正在工作，但读取没有 returning 任何值。

如您所见，我有一个名为“users”的 collection。在 collection 中，每个文档都以用户的 ID 命名。每个文档中的数据是我要 return 并在页面加载时显示的数据：标记为电话号码和标题的数据。（注意事项，使用异步/等待似乎会导致页面无法呈现。不确定这是否是潜在的问题。- 与尝试相同：userData.data()

当然，displayName、userId 和 email 会出现在 Dom 中，因为它们是用户 object，所以我知道我需要更改 Phone 编号和标题的 JSX 值，但这给我带来了麻烦。谢谢！

摘录如下：

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 1

您需要使用 useEffect 和 setState 才能呈现您的数据。此外，Firebase Firestore 本质上是异步的，一般来说，没有人应该尝试将异步操作转换为同步操作，因为这会导致问题。您需要使用异步函数从 Firestore 中获取数据。请参阅下面的示例代码：

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()
}, [])

更多信息，您可以查看Get data with Cloud Firestore。

getDoc 值 Firebase React

getDoc values Firebase React

javascript

crud

firebase

reactjs

google-cloud-firestore