使用 React 和 Firestore 登錄后如何通過 UID 獲取用戶詳細信息？

Question

在這里，我從 Firestore 中獲取所有文檔：

useEffect(() => {
    const getUsers = async () => {
        const data = await getDocs(usersCollectionRef);
        setUsers(data.docs.map((doc) => ({
            ...doc.data(),
            id: doc.id,
        })))
    };
    getUsers();
}, []);

然后我把它放在下面的 div 上顯示細節：

                     <div>
                    {users.map((user) => {
                        return (<div className="card-body" key={user.id}>
                            <p className="card-text"><u>User details</u></p>
                            <p className='card-text'>User : {user.id}</p>
                            <p className='card-text'>User : {user.name}</p>
                            <p className='card-text'>Your weight : {user.weight}</p>
                            <p className='card-text'>Your height : {user.height}</p>
                            <p className='card-text'>Age : {user.age}</p>
                        </div>)
                    })}
                </div>

如果 Firestore 數據庫中有超過 1 個用戶，它會顯示所有用戶的所有文檔：在下圖中，您可以看到存儲在數據庫中的兩個用戶的詳細信息

Answer 1

您正在使用getDocs(collectionRef)從集合中獲取所有文檔。 如果您只想獲取當前用戶的文檔，則可以將getDoc()與DocumentReference一起使用，如下所示：

const [user, setUser] = useState(null);

useEffect(() => {
  onAuthStateChanged(auth, (user) => {
    if (user) {
      const uid = user.uid;
      const snapshot = await getDoc(doc(db, "users", uid));
      if (snapshot.exists()) {
        setUser(snapshot.data())
      } else {
        console.log("User doc missing")
      }
    } else {
      console.log("User not logged in")
      setUser(null);
    }
  });
}, []);

那么你不必使用map因為user不是數組：

  <div>
    {true ? (
      <div className="card-body" key={user.id}>
        <p className="card-text">
          <u>User details</u>
        </p>
        <p className="card-text">User : {user.id}</p>
        <p className="card-text">User : {user.name}</p>
        <p className="card-text">Your weight : {user.weight}</p>
        <p className="card-text">Your height : {user.height}</p>
        <p className="card-text">Age : {user.age}</p>
      </div>
    ) : (
      <p>No user logged in</p>
    )}
  </div>