React+Firebase Auth登录状态异常：重启网站后跳转登录页

开发简易注册登录系统时，使用Firebase Auth完成登录注册后，重启网站控制台能打印出用户信息，但应用仍会自动跳转到登录页，用户状态没有被正确持久化识别。

问题原因 #

核心问题出在App组件的初始状态判断逻辑：

• 组件挂载时authUser初始值为null，而onAuthStateChanged是异步执行的，页面会先基于authUser === null的状态触发跳转到登录页，等Firebase异步返回用户信息时，跳转已经完成，无法再回到首页。
• 另外，useEffect的清理函数写法不规范，虽然不是直接导致问题的原因，但需要修正以避免潜在内存泄漏。

修复后的App.jsx代码 #

import { useState, useEffect } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { onAuthStateChanged } from 'firebase/auth'
import { auth } from './firebase'

// Pages
import SignUp from './pages/SignUp.jsx'
import SignIn from './pages/SignIn.jsx'
import Home from './pages/Home.jsx'

function App() {
  const [authUser, setAuthUser] = useState(null)
  // 添加加载状态，初始为true
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        setAuthUser(user)
        console.log(user)
      } else {
        setAuthUser(null)
      }
      // 无论是否有用户，都标记加载完成
      setIsLoading(false)
    })
    // 清理函数直接返回unsubscribe函数，组件卸载时取消监听
    return unsubscribe
  }, [])

  // 加载中时显示占位内容，避免错误跳转
  if (isLoading) {
    return <div>加载中...</div>
  }

  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={authUser ? <Home/> : <Navigate to='signIn'/>}/>
          <Route path='/signup' element={<SignUp />} />
          <Route path='/signin' element={<SignIn />} />
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App

修改说明 #

1. 添加加载状态isLoading：初始为true，在Firebase Auth返回用户状态后设置为false，确保只有在状态确认完成后才进行路由判断，避免初始状态的错误跳转。
2. 修正useEffect清理函数：直接返回onAuthStateChanged返回的unsubscribe函数，组件卸载时自动取消监听，避免内存泄漏。
3. 加载中占位：防止页面初始渲染时的空白或错误跳转体验。

额外优化建议（非核心问题） #

SignIn和SignUp组件中的密码输入框，类型应从type="text"改为type="password"，避免密码明文显示：

// SignIn.jsx中修改密码输入框
<input type="password" className="grow" placeholder="Digit your password" onChange={(e) => setPassword(e.target.value)} required value={password} />
// SignUp.jsx中同理修改两个密码输入框

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