Firebase onAuthStateChanged触发后新账号登录未自动跳转首页问题

问题原因 #

• 根组件的useEffect未添加空依赖数组，每次组件渲染都会重复订阅登录状态监听，导致状态更新逻辑异常
• 登录状态判断时读取auth.currentUser可能拿到旧缓存值，新账号登录/完成邮箱验证时，onAuthStateChanged仅在登录状态变化时触发，用户属性（如邮箱验证状态）更新不会自动触发该回调，导致userAuth状态未及时更新
• 根导航将条件渲染逻辑放在Drawer.Screen的component属性中，react-navigation会缓存同名称Screen的组件，状态变更时未触发组件重新加载

修复方案 #

1. 修复登录状态监听逻辑 #

修改根组件的useEffect，添加空依赖数组，直接使用回调返回的user对象判断状态：

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged(user => {
    setUserAuth(!!(user && user.emailVerified))
  })
  return unsubscribe
}, [])

2. 优化导航渲染逻辑 #

删除根组件多余的Drawer.Navigator包裹，直接条件渲染对应导航组件，避免react-navigation缓存导致的组件不更新：

return (
  <Provider store={store}>
    <NavigationContainer>
      {userAuth ? <MainDrawer /> : <AuthStack />}
    </NavigationContainer>
  </Provider>
)

3. 补充新账号邮箱验证状态同步逻辑 #

如果业务要求新账号必须验证邮箱才能登录，在用户点击验证链接回到应用时，手动刷新用户状态同步验证结果：

// 邮箱验证回调页/登录页添加该逻辑
useEffect(() => {
  const syncUserState = async () => {
    const currentUser = auth.currentUser
    if (!currentUser) return
    // 刷新用户最新信息
    await currentUser.reload()
    setUserAuth(!!currentUser.emailVerified)
  }
  // 页面聚焦时触发检查
  const unsubscribe = navigation.addListener('focus', syncUserState)
  return unsubscribe
}, [navigation])

内容的提问来源于stack exchange，提问作者jonson.ncube