React Native中Firebase onAuthStateChanged条件判断错误致导航无限触发

我太懂你这个糟心问题了——每次用户登录成功后，导航代码就像停不下来的循环一样反复触发，对吧？其实根源出在Firebase的状态监听逻辑和导航的无限制执行上，咱们一步步拆解修复：

问题到底出在哪？ #

你在componentDidMount里注册了onAuthStateChanged监听器，但没在组件卸载时清理它；而且只要检测到用户已登录，就无条件执行导航：

• 用户登录成功时，监听器触发，跳转到LoggedIn页面
• 如果登录页没被从导航栈移除，后续Firebase自动刷新用户token时，监听器会再次触发，又执行一次导航
• 要是用户从LoggedIn页退回登录页，监听器立刻检测到已登录状态，又把用户跳回去，直接形成死循环

具体修复方案 #

结合这几个步骤，就能彻底解决问题：

1. 清理监听器，避免内存泄漏和无效触发

先把onAuthStateChanged返回的取消监听函数存起来，组件卸载时调用它，防止监听器一直挂着：

componentDidMount() {
  // 保存取消监听的函数引用
  this.unsubscribeAuth = fbAuth.onAuthStateChanged(user => this.myFunc(user));
}

componentWillUnmount() {
  // 组件卸载时移除监听器
  if (this.unsubscribeAuth) {
    this.unsubscribeAuth();
  }
}

2. 加导航判断，杜绝重复跳转

执行导航前先检查当前页面是不是已经是LoggedIn，避免做无用功：

myFunc(user) {
  if (user) {
    console.log("LOGGED IN");
    console.log(user);
    // 获取当前路由名称，判断是否需要跳转
    const currentScreen = this.props.navigation.getCurrentRoute().name;
    if (currentScreen !== "LoggedIn") {
      this.props.navigation.navigate("LoggedIn");
    }
  } else {
    console.log("NOT LOGGED IN");
    // 这里可以补充未登录时的逻辑，比如停留在登录页或跳转到注册页
  }
}

3. 可选优化：用replace替代navigate（移除登录页栈）

如果不想让用户能从LoggedIn页退回到登录页，直接用replace替换navigate，这样登录页会被从导航栈中彻底移除，从根源上避免后续触发：

this.props.navigation.replace("LoggedIn");

这样改完之后，监听器会在组件卸载时被清理，而且只有在需要跳转的时候才执行导航，无限循环的问题就搞定啦。

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