React Native中Firebase登录后React Navigation路由参数传递异常

问题根源 #

你之前通过App.js传递currentUser和setCurrentUser给SignIn页面的方式存在状态同步问题：登录成功后Firebase的Auth状态更新了，但Dashboard页面没有订阅这个全局状态变化，仅靠props/导航参数无法拿到最新的用户信息，导致currentUser为undefined。

最优解决方案：用Context全局共享Auth状态 #

直接通过React Context封装Firebase Auth的状态监听，让所有页面都能实时获取最新的用户状态，避免props传递的同步问题。

1. 创建Auth Context

新建AuthContext.js文件：

import { createContext, useContext, useEffect, useState } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState(null);
  const auth = getAuth();

  useEffect(() => {
    // 监听Auth状态变化，自动更新currentUser
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
    });
    // 组件卸载时取消监听，防止内存泄漏
    return unsubscribe;
  }, [auth]);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
}

// 自定义钩子，简化Context调用
export function useAuth() {
  return useContext(AuthContext);
}

2. 在App.js中包裹导航容器

用AuthProvider包裹整个导航结构，让所有页面都能访问Auth状态：

import { AuthProvider } from './AuthContext';
import { NavigationContainer } from '@react-navigation/native';
// 导入你的导航栈（比如StackNavigator）

export default function App() {
  // 确保已初始化Firebase（这里省略Firebase初始化代码）
  return (
    <AuthProvider>
      <NavigationContainer>
        {/* 你的导航栈配置 */}
      </NavigationContainer>
    </AuthProvider>
  );
}

3. 修改SignIn页面

不需要再接收currentUser和setCurrentUser props，登录成功后直接跳转即可：

import { useNavigation } from '@react-navigation/native';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

export default function SignIn() {
  const navigation = useNavigation();
  const auth = getAuth();

  const handleSignIn = async (email, password) => {
    try {
      await signInWithEmailAndPassword(auth, email, password);
      // 登录成功后直接跳转，AuthContext已自动更新currentUser
      navigation.navigate('Dashboard');
    } catch (error) {
      console.error('登录失败：', error.message);
    }
  };

  // 页面渲染逻辑（输入框、登录按钮等）
}

4. 在Dashboard页面获取用户状态

用useAuth钩子直接获取最新的currentUser：

import { useAuth } from './AuthContext';
import { View, Text } from 'react-native';

export default function Dashboard() {
  const { currentUser } = useAuth();

  // 未登录时的处理（比如跳回登录页或显示提示）
  if (!currentUser) {
    return <Text>请先登录</Text>;
  }

  return (
    <View>
      <Text>欢迎回来，{currentUser.email}</Text>
      {/* Dashboard其他内容 */}
    </View>
  );
}

为什么之前的方式不行？ #

• 你通过props传递的currentUser是App.js的局部状态，登录成功后App.js的状态更新了，但Dashboard是新打开的页面，没有订阅这个状态变化，只能拿到初始的undefined。
• 依赖导航参数传递用户信息的方式不健壮：用户退出登录、token过期等场景下，Dashboard无法自动感知状态变化，会出现显示异常。

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