React + Firebase v9 页面刷新后登录用户自动登出问题求助

你的判断没错，问题核心在于Firebase的onAuthStateChanged是异步执行的，组件初始化时currentUser的初始状态是{}，刷新页面后组件会先以初始状态渲染，此时PrivateRoute检测到用户状态不符合要求就会跳转到登录页；等异步回调完成、currentUser更新为实际用户对象时，已经来不及阻止跳转了。

以下是具体修复方案：

1. 修正初始状态与添加加载状态 #

首先调整currentUser的初始值为null（贴合Firebase Auth的返回逻辑：未登录时返回null，登录后返回用户对象），同时新增loading状态，等待Firebase完成用户状态校验：

function App() {
  // 初始设为null，匹配Firebase未登录时的返回值
  const [currentUser, setCurrentUser] = useState(null)
  const [timeActive, setTimeActive] = useState(false)
  // 新增加载状态，初始为true
  const [loading, setLoading] = useState(true)
  
useEffect(()  => {
    // 保存订阅引用，用于组件卸载时清理
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setCurrentUser(user)
      // auth状态校验完成，设置loading为false
      setLoading(false)
     })
    // 组件卸载时取消订阅，避免内存泄漏
    return unsubscribe
  }, [])

  // 加载中时显示占位内容，避免路由提前跳转
  if (loading) {
    return <div>加载中...</div>
  }
  
  return (
    <Router>
       <AuthProvider value={{currentUser, timeActive, setTimeActive}}>
      <Switch>
        <PrivateRoute exact path="/" component={Profile} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
        <Route exact path='/verify-email' component={VerifyEmail} />
      </Switch>
      </AuthProvider>
  </Router>
  );
}

export default App;

2. 确保PrivateRoute正确处理状态 #

同时检查你的PrivateRoute实现，确保它能准确判断用户状态：

function PrivateRoute({ component: Component, ...rest }) {
  const { currentUser } = useContext(AuthContext)
  return (
    <Route
      {...rest}
      render={(props) => {
        // 存在currentUser则渲染目标组件，否则跳转到登录页
        return currentUser ? <Component {...props} /> : <Redirect to="/login" />
      }}
    />
  )
}

关键修复点说明 #

• 初始状态修正：把currentUser初始值从{}改为null，让PrivateRoute能准确区分"未登录"和"正在校验状态"的情况。
• 加载状态拦截：loading为true时不渲染路由，等待Firebase完成用户状态读取，避免异步延迟导致的错误跳转。
• 清理订阅：在useEffect中返回unsubscribe函数，组件卸载时取消auth状态监听，防止内存泄漏。

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