React Native集成Firebase Auth后登录无法跳转至HomeScreen问题

核心错误点 #

你当前的路由渲染逻辑完全搞反了：代码中user存在时显示LoginScreen，不存在时显示HomeScreen，这和实际需求（登录后进入Home）正好相反，这是导致跳转失效的直接原因。

具体修复步骤 #

1. 修正路由判断逻辑 #

把问题代码改成如下：

{user ? <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false}} /> : <Stack.Screen name="Login" component={Login} options={{ headerShown: false}} />}

反转三元表达式后，用户登录（user存在）时会渲染HomeScreen，未登录时渲染LoginScreen。

2. 改用 Firebase Auth 状态监听（更可靠） #

手动维护user状态容易出现同步问题，Firebase 10版本推荐用内置的状态监听自动同步用户状态：

import { onAuthStateChanged } from 'firebase/auth';
import { auth } from './path-to-your-firebase-config'; // 替换为你的Firebase配置文件

// 在App组件内添加
useEffect(() => {
  const authListener = onAuthStateChanged(auth, (currentUser) => {
    setUser(currentUser);
  });
  // 组件卸载时取消监听，避免内存泄漏
  return authListener;
}, []);

这种方式会自动捕获用户登录、登出、会话过期等状态变化，比手动调用setUser更稳定。

3. 简化登录逻辑，移除手动跳转 #

登录成功后不需要手动调用navigation.navigate，依赖状态监听自动切换路由即可：

// LoginScreen.js 中的登录函数
const handleLogin = async () => {
  try {
    await signInWithEmailAndPassword(auth, email, password);
    // 无需手动跳转，Auth状态变化会触发路由更新
  } catch (err) {
    console.error('登录失败:', err.message);
  }
};

4. 检查 React Navigation 配置完整性 #

确保你的导航容器和栈导航配置正确，没有多余的拦截逻辑：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  const [user, setUser] = useState(null);

  // 这里添加上面的onAuthStateChanged监听

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
        ) : (
          <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

额外排查项 #

• 确认Firebase 10的Auth模块导入正确，必须从firebase/auth导入，而非旧版本的firebase/app。
• 在App.js中添加console.log('当前用户状态:', user)，验证user状态是否在登录后正确更新。

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