Firebase Auth页面加载前获取UID失败，Firestore查询报错求助

问题核心在于页面初始化时Firebase Auth的currentUser还未完成加载（处于null状态），直接访问auth.currentUser.uid会触发类型错误。重新加载页面时Auth从本地缓存读取状态，所以能正常执行查询。以下是正确的解决方案：

官方推荐方案：使用onAuthStateChanged监听用户状态 #

Firebase Auth提供了onAuthStateChanged方法，用于监听用户登录状态的变化（包括初始加载完成的状态），这比依赖useEffect的变更更可靠。

代码实现 #

import { onAuthStateChanged } from "firebase/auth";
import { query, where, getDocs } from "firebase/firestore";

// 组件内逻辑
const [storyList, setStoryList] = useState([]);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  // 订阅Auth状态变化
  const unsubscribe = onAuthStateChanged(auth, async (user) => {
    setIsLoading(true);
    if (user) {
      // 用户已登录，执行带uid的查询
      const q = query(storiesCollectionRef, where("authorId", "==", user.uid));
      const data = await getDocs(q);
      setStoryList(data.docs.map(doc => ({ ...doc.data(), id: doc.id })));
    } else {
      // 用户未登录，清空数据或处理未登录逻辑
      setStoryList([]);
    }
    setIsLoading(false);
  });

  // 组件卸载时取消订阅，避免内存泄漏
  return () => unsubscribe();
}, []); // 空依赖，仅初始化一次订阅

// 渲染逻辑
if (isLoading) {
  return <div>加载中...</div>;
}

return (
  <div>
    {storyList.map(story => (
      <Storybook key={story.id} title={story.title} />
    ))}
  </div>
);

为什么之前的useEffect依赖方案无效？ #

• 依赖[]：仅执行一次，此时currentUser可能仍为null，直接查询报错。
• 依赖[auth]：auth对象的引用通常不会随currentUser变化而更新，所以useEffect不会重新触发。
• 依赖[auth.currentUser]：currentUser从null变为用户对象时，理论上会触发更新，但部分场景下（如Auth缓存加载延迟）可能仍存在时序问题，不如onAuthStateChanged的回调机制可靠。

替代方案：使用Firebase Auth的await getAuth().currentUser？ #

不行，getAuth().currentUser是同步属性，初始状态仍为null，无法等待Auth加载完成。必须通过onAuthStateChanged的异步回调来捕获用户状态。

内容的提问来源于stack exchange，提问作者rjamer