React App集成Firebase后用户登出异常、用户信息显示错误问题咨询

问题根因 #

该问题和toggleUser的位置没有关系，核心错误出在UserContext.js的onAuthStateChanged回调逻辑中：

• 用户点击登出触发auth.signOut后，会触发Firebase的 auth 状态变更回调，此时userAuth的值为null，你在else分支执行了setUser({ currentUser: userAuth })，也就是把全局的currentUser状态设置成了值为{currentUser: null}的对象，而非空值null
• JS 中对象属于真值，所以Nav.js里currentUser ? 展示用户信息/登出按钮 : 展示无用户提示/登录按钮的判断会永远走真值分支，就出现了字段为空、登出按钮不消失的问题
• 你在toggleUser里写的setUser(null)会被后续触发的onAuthStateChanged回调覆盖，相当于无效赋值

修复步骤 #

1. 修改UserContext.js中onAuthStateChanged的else分支逻辑，未登录时直接把用户状态设为null：

useEffect(() => {
    unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
        if (userAuth) {
            const userRef = await createUserProfileDocument(userAuth);
            userRef.onSnapshot(snapShot => {
                setUser({
                    id: snapShot.id,
                    ...snapShot.data()
                });
            });
        } else {
            // 替换原有的setUser({ currentUser: userAuth })
            setUser(null)
        }
    });
    return () => {
        unsubscribeFromAuth();
    };
}, [])

2. 删掉toggleUser里多余的setUser逻辑，状态更新统一交给onAuthStateChanged处理即可，顺便修复catch语句的语法错误：

const toggleUser = () => {
    auth.signOut()
    .catch(e => console.log('登出报错:', e))
}

补充说明 #

不需要把toggleUser移出UserContextProvider作用域，你当前的provider包裹层级是正确的，整个应用共享同一个用户状态，切换页面不会重新触发provider初始化，也不会自动调用toggleUser，你之前的猜测不成立。修复后登出时用户状态会自动更新为null，所有消费用户上下文的组件都会同步刷新，正常显示无用户提示和登录按钮。

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