React Native使用Firebase认证访问user.uid报null错误如何解决

问题根因 #

你的代码维护了两套完全独立的用户状态：

• 一套是AuthProvider中定义的全局user状态，默认值为null
• 另一套是Routes组件内部单独声明的user状态
  你在Routes中监听Firebase登录状态变更时，仅更新了组件内部的user变量，没有同步到AuthProvider的全局状态。因此HomeScreen从AuthContext中取到的user一直是初始值null，访问null.uid自然触发类型错误。

修复方案 #

第一步：同步登录状态到全局Context #

修改Routes.js代码，将Firebase返回的用户状态同步到AuthContext：

import React, { useContext, useEffect, useState } from 'react'
import { NavigationContainer } from '@react-navigation/native'
import auth from '@react-native-firebase/auth'
    
import { AuthContext } from './AuthProvider'
import AuthStack from './AuthStack'
import AppStack from './AppStack'

const Routes = () => {
  // 从Context中取出setUser方法
  const { setUser: setGlobalUser } = useContext(AuthContext)
  const [initializing, setInitializing] = useState(true)
  const [user, setUser] = useState()

  const onAuthStateChanged = (user) => {
    setUser(user)
    // 新增：同步状态到全局Context
    setGlobalUser(user)
    if (initializing) setInitializing(false)
  }

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged)
    return subscriber // 组件卸载时取消订阅
  }, [])

  if (initializing) return null// 可在Firebase加载期间展示加载动画

  return ( 
    <NavigationContainer>
      { user ? <AppStack/> : <AuthStack/> }
    </NavigationContainer>
    )
}
  
export default Routes

第二步（可选优化）：删除重复状态 #

你完全可以删掉Routes内部的本地user状态，直接复用全局状态，避免多状态不一致的隐患：

const Routes = () => {
  const { user, setUser } = useContext(AuthContext)
  const [initializing, setInitializing] = useState(true)

  const onAuthStateChanged = (user) => {
    setUser(user)
    if (initializing) setInitializing(false)
  }

  // 其余代码保持不变
}

第三步（兼容优化）：增加空值防护 #

修改HomeScreen.js的渲染代码，增加可选链避免偶发空值报错：

<Text style={globalStyles.textHome}>Welcome  {user?.uid} </Text>

内容的提问来源于stack exchange，提问作者juan José