Firebase中getAuth().currentUser返回null问题求助

你的代码里直接在组件挂载时读取auth.currentUser返回null，核心原因是Firebase Auth的用户状态初始化是异步操作——组件挂载完成时，Firebase还没完成用户认证状态的加载，自然拿不到用户数据。

下面是两种可行的解决方法：

方法一：使用onAuthStateChanged监听用户状态（官方推荐） #

这是最可靠的方式，能实时监听用户登录、登出等状态变化，自动更新用户数据：

import React, { useState, useEffect } from 'react'
import { getAuth, onAuthStateChanged } from 'firebase/auth'

const Profile = () => {
  const [user, setUser] = useState(null)
  const auth = getAuth()

  useEffect(() => {
    // 订阅用户状态变化
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      console.log(currentUser)
      setUser(currentUser)
    })

    // 组件卸载时取消订阅，避免内存泄漏
    return () => unsubscribe()
  }, [auth])

  return (
    <div>
      <h1>Profile</h1>
      {user ? <p>当前用户：{user.email}</p> : <p>未登录</p>}
    </div>
  )
}

export default Profile

方法二：等待auth状态初始化完成（仅获取初始状态） #

如果只需要获取组件挂载时的初始用户状态，可以用auth.authStateReady()等待初始化完成，但这种方式无法监听后续状态变化：

import React, { useState, useEffect } from 'react'
import { getAuth } from 'firebase/auth'

const Profile = () => {
  const [user, setUser] = useState(null)
  const auth = getAuth()

  useEffect(() => {
    const fetchInitialUser = async () => {
      // 等待auth状态初始化完成
      await auth.authStateReady()
      console.log(auth.currentUser)
      setUser(auth.currentUser)
    }
    fetchInitialUser()
  }, [auth])

  return <h1>Profile</h1>
}

export default Profile

简单总结：如果你需要实时响应用户登录/登出，优先用方法一；如果只需要初始状态，方法二可以临时解决，但灵活性不如前者。

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