React Native Firebase onAuthStateChanged失效，无法按登录状态跳转页面

你的代码存在多个关键问题，导致onAuthStateChanged无法正常工作，最终出现无论用户是否登录都跳转到登录页面的情况：

1. 状态变量拼写错误 #

setInitializin是拼写错误，正确应为setInitializing。这个错误会导致初始化状态initializing无法被正确切换为false，干扰状态更新逻辑。

2. 用户状态初始值错误 #

你将user的初始值设为空字符串''，但Firebase Auth的onAuthStateChanged在用户未登录时返回null、登录时返回用户对象。空字符串属于假值，会导致!user的判断始终为true，即使后续用户状态更新，也会因为初始值问题引发逻辑异常。正确的初始值应为null。

3. 重复嵌套NavigationContainer #

App组件内部已经返回带independent={true}的NavigationContainer，但导出的默认组件又额外套了一层，这会引发导航容器冲突，破坏导航逻辑的正确性，同时导致组件渲染异常。

4. 未定义Stack变量 #

代码中使用了Stack.Navigator和Stack.Screen，但没有通过createNativeStackNavigator()创建Stack变量，会直接导致运行报错。

5. 多余的递归返回代码 #

App组件末尾的这段代码会导致无限递归渲染，完全没有存在的必要：

return (
  <NavigationContainer>
    <App />
  </NavigationContainer>
);

修复后的完整代码 #

import { useState, useEffect } from 'react';
import { firebase } from './config';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// 请确保导入你的页面组件
import LoginScreen from './LoginScreen';
import CreateAccount from './CreateAccount';
import DailyScreen from './DailyScreen';
import Detail from './Detail';

const Stack = createNativeStackNavigator();

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

  function onAuthStateChanged(user) {
    setUser(user);
    if (initializing) setInitializing(false);
  }

  useEffect(() => {
    const subscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber;
  }, []);

  if (initializing) return null;

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {!user ? (
          <>
            <Stack.Screen
              name='Login'
              component={LoginScreen}
              options={{ headerShown: false, headerBackVisible: false }}
            />
            <Stack.Screen
              name='Create'
              component={CreateAccount}
              options={{ headerTitle: 'Create An Account' }}
            />
          </>
        ) : (
          <>
            <Stack.Screen
              name='Daily'
              component={DailyScreen}
              options={{ headerShown: false, headerBackVisible: false }}
            />
            <Stack.Screen
              name='Detail'
              component={Detail}
              options={{ headerShown: false, headerBackVisible: false }}
            />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

额外排查建议 #

如果修复后仍有问题，可以在onAuthStateChanged函数中添加console.log(user)，查看Firebase返回的用户状态是否正确，以此区分是Auth监听失效还是导航逻辑的问题。同时确认./config中的Firebase配置已正确初始化Auth模块。

内容的提问来源于stack exchange，提问作者Ulaş Kara