React Native(Expo)用户认证后导航失效问题排查

我是React Native新手，用Expo开发应用，采用Firebase Auth服务做身份验证，能成功创建用户，但登录/注册后遇到导航问题：

• 成功登录或注册后，应用仍停留在登录/注册页面，无法跳转到HomeScreen；
• 刷新应用后能正常进入HomeScreen，推测是用户状态变更的问题，但不知道代码哪里需要修改。

App.js 相关代码 #

// Perform authentication check on app startup 
useEffect(() => {    
  setIsLoading(true);
  console.log("App.js - Calling performAuthenticationCheck()");
  performAuthenticationCheck()
    .then((user) => {
      setUser(user);
      setIsLoading(false);
      console.log("App.js - SetUser Email is: ", user.email);       
      navigation.navigate('Home');

    })
    .catch((error) => {
      console.log('Authentication Check Error: ', error);
      setIsLoading(false);
    });
}, []);

.....

return (
  <NavigationContainer>
    <StatusBar style="auto" />
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      {user ? (
        <Stack.Group screenOptions={{ headerShown: false }}>
          <Stack.Screen name="Home" component={HomeScreen}/>
          <Stack.Screen name="Profile" component={ProfileScreen} />
          <Stack.Screen name="AppTabs" component={AppTabs} />
        </Stack.Group>
      ) : (
        <Stack.Group screenOptions={{ headerShown: false }}>
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="Signup" component={EmailSignupScreen} />
        </Stack.Group>
      )}
    </Stack.Navigator>
  </NavigationContainer>
);

LoginScreen 登录处理代码 #

const handleLogin = () => {
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Login successful, do something with the userCredential
      const user = userCredential.user;
      console.log('LoginScreen - User Credentials received: ', userCredential.user.email);      
      setUser(user);                
                     
    })
    .catch((error) => {
      // Log the error
      console.log('Firebase Login Error: ', error);
      // Set the error state for display
      setError(error.message);
    });
};

核心问题 #

1. 状态作用域不匹配：LoginScreen里调用的setUser大概率不是App.js中控制导航的user状态的setter。如果user状态定义在App.js，LoginScreen未正确获取全局状态的更新方法，导致App.js的user状态未变更，自然不会触发导航切换。
2. 缺少实时状态监听：仅在App启动时检查一次用户状态，登录/注册是后续操作，App.js无法感知Firebase Auth的状态变化，因此不知道用户已登录。

修复步骤 #

1. 正确共享全局用户状态 #

如果user状态在App.js定义，需将setUser通过props传递给LoginScreen和SignupScreen，确保登录/注册成功后更新的是App.js的user状态：

• 修改App.js中LoginScreen的配置：

<Stack.Screen name="Login">
  {(props) => <LoginScreen {...props} setUser={setUser} />}
</Stack.Screen>

• 在LoginScreen中接收并使用setUser：

const LoginScreen = ({ setUser }) => {
  // ... 其他代码
  const handleLogin = () => {
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        console.log('LoginScreen - User Credentials received: ', user.email);      
        setUser(user); // 现在更新的是App.js的user状态
      })
      .catch((error) => {
        console.log('Firebase Login Error: ', error);
        setError(error.message);
      });
  };
};

2. 添加Firebase Auth实时状态监听 #

在App.js中使用onAuthStateChanged监听Auth状态变化，替代仅启动时的单次检查：

useEffect(() => {
  setIsLoading(true);
  // 监听Auth状态实时变化
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    setUser(user);
    setIsLoading(false);
    // 无需手动调用navigate，导航容器会根据user状态自动切换页面
  });

  // 组件卸载时取消监听，避免内存泄漏
  return unsubscribe;
}, []);

3. 移除冗余的手动导航 #

App.js中useEffect里的navigation.navigate('Home')是多余的，导航容器会根据user状态自动渲染对应页面分组，状态更新后会自动切换到HomeScreen。

4. 确认状态更新触发重渲染 #

确保App.js中的user状态是用useState定义的：

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

这样调用setUser时，App.js会重新渲染，导航容器也会同步切换页面。

额外建议 #

• 注册页面的修复逻辑和登录页面完全一致，传递setUser并在注册成功后调用更新状态。
• 可以将Firebase Auth的逻辑封装成自定义Hook（如useAuth），方便在各组件复用，减少状态传递的繁琐。

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