React Native结合Firebase开发点击登出后未跳转回登录页问题排查

问题原因 #

你的核心导航组件MainNav中的登录状态监听逻辑只处理了用户登录的场景，没有处理用户登出后清空状态的场景，导致登出后本地用户状态没有更新，自然不会切换到认证导航栈。另外登出方法没有处理异步逻辑和异常捕获，也可能引发隐性问题。

修复步骤 #

1. 修正MainNav中的登录状态监听逻辑 #

修改bootstrap方法，当onAuthStateChanged返回用户为空时，同步更新本地的user状态：

const bootstrap = () => {
    firebase.auth().onAuthStateChanged(_user => {
        // 直接赋值即可，用户存在时存储用户信息，用户为空时自动设为null
        setUser(_user)
    })
}

2. 完善登出方法的异步处理 #

firebase.auth().signOut()是异步方法，需要添加await和异常捕获，避免登出请求失败无提示：

const signOut = async () => {
    try {
        await firebase.auth().signOut();
    } catch (error) {
        console.log('登出失败：', error)
        // 此处可根据业务需要添加用户弹窗提示
    }
}

修改完成后只要登出成功，onAuthStateChanged会自动触发并把user状态设为null，导航就会自动切换到AuthStack对应的登录相关页面。

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