已登录用户存在时auth.currentUser为何返回null？

你的代码存在三个关键问题： #

1. Provider组件错误消费自身Context
   你在Component里先调用useContext(UserContext)，但这个组件本身就是UserContext.Provider的提供者，此时Context还未完成值的注入，currentUser的初始值完全不可靠，属于逻辑错误。

2. useEffect依赖导致循环更新
   你的useEffect依赖项是currentUser，调用setCurrentUser会更新currentUser，进而再次触发useEffect，形成无限循环。

3. auth.currentUser的初始化时机问题
   Firebase Auth在页面加载时需要从本地缓存异步加载用户会话，组件挂载时这个过程大概率还没完成，直接读取auth.currentUser自然会返回null；而onAuthStateChanged监听器会在用户会话加载完成（或状态变化）时主动触发回调，所以能拿到正确的用户信息。

修正后的代码： #

import { getAuth, onAuthStateChanged } from "firebase/auth";
import { useState, useEffect } from "react";
import { UserContext } from "./你的UserContext路径";

const UserProvider = ({ children }) => {
  // 用useState维护用户状态，而非消费自身Context
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    const auth = getAuth();
    // 订阅Auth状态变化
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
    });

    // 组件卸载时取消订阅，避免内存泄漏
    return unsubscribe;
  }, []); // 空依赖确保仅在组件挂载时执行一次

  return (
    <UserContext.Provider value={{ currentUser, setCurrentUser }}>
      {children}
    </UserContext.Provider>
  );
};

export default UserProvider;

关键说明： #

• 用useState初始化并维护currentUser状态，由Provider自身掌控，避免消费未初始化的Context。
• onAuthStateChanged会在Firebase Auth完成初始化后立即触发回调返回当前用户（若存在），同时会在用户登录/登出时自动更新状态，完美覆盖异步初始化的场景。
• 空依赖数组[]保证订阅逻辑只执行一次，返回的unsubscribe函数会在组件卸载时清理监听器，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Alb Rick Bi