如何避免 firestore 出现赛车状况

Question

我正在尝试显示一条消息，内容为“欢迎，名字”。我从名为“useraccounts”的 Firestore 集合中获取第一个名称。

相关代码如下：

import { doc, getDoc, getFirestore } from 'firebase/firestore';
import {auth} from '../firebase';

const Main = () => {
   const db = getFirestore()
   const [user, setUser] = useState("");

   // getting the logged-in user 
   const currentUser = auth.currentUser;

const getUser = async () => {
  
  let userEmail = currentUser.email
  
  //undefined on first load or browser reload, but fine when I reload the code 
  console.log("userEmail: ", userEmail); 

  // the firestore bits
  const docRef = doc(db, 'useraccounts', userEmail)
  const docSnap = await getDoc(docRef)

  // checking to see if the user logged in has a user account record 
  // in the 'useraccounts' collection
  if (docSnap.exists()){
    setUser(docSnap.data().first);
  } else {
    //this doesn't show when it's undefined either by the way
    console.log("nothing here"); 
  }      
}

// calling it on load and reload...or so I thought
useEffect(() => {       
   getUser();
},[])

问题？ - 它不会在加载/刷新时显示名称。但是，如果我更改代码中的一些任意内容以强制刷新，它就会显示。因此，表现出赛车状况的症状。

将 getUser() 放在 useEffect 中没有什么不同

Answer 1

很可能在初始化

auth.currentUser

组件时尚未设置

Main

，因为确定

currentUser

是一个异步操作（因为 Firebase 需要检查服务器，例如帐户是否已被禁用）。

要解决此问题，请使用身份验证状态侦听器，如有关获取当前用户的文档中的第一个代码片段所示。

基于此：

const Main = () => {
  const db = getFirestore()
  const [user, setUser] = useState("");
  const [currentUser, setCurrentUser] = useState(); // 👈 New state variable

  // 👇 New useEffect listener
  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
    });
  }, []);;

  // 👇 Cleaned this up a bit
  useEffect(() => {       
    let userEmail = currentUser.email; // 👈 use the new currentUser state
  
    // the firestore bits
    const docRef = doc(db, 'useraccounts', userEmail)
    getDoc(docRef).then((docSnap) => {
      if (docSnap.exists()){
        setUser(docSnap.data().first);
      } else {
        console.log("nothing here"); 
      }      
    });
  }, [currentUser]); // 👈 Re-run this effect when the currentUser changes
})