NextJS集成Firebase Authentication时signOut功能失效问题

问题分析 #

你的代码存在几个关键问题导致登出后用户状态未更新：

1. useMemo缺少依赖数组：Context的memoized值不会随currentUser等状态变化更新，组件始终拿到旧的用户状态。
2. 手动设置用户状态可能导致同步问题：logout函数中先手动设置currentUser(null)，但Firebase的onAuthStateChanged回调会覆盖这个状态，引发不一致。
3. loading状态逻辑错误：用户登出时错误设置loading: true，导致状态判断混乱。
4. 第三方登录的authProvider字段错误（虽不影响登出，但属于潜在bug）。

修复步骤 #

1. 修复useMemo的依赖数组 #

确保Context值随状态变化实时更新：

const memoedValue = useMemo(() => ({
  currentUser,
  signInWithGoogle,
  logout,
  createUserWithEmailAndPassword,
  loading,
  signInWithFacebook,
}), [currentUser, loading, signInWithGoogle, logout, signInWithFacebook]);

2. 简化logout函数 #

移除手动设置用户状态的代码，依赖Firebase的onAuthStateChanged自动同步状态：

const logout = async () => {
  try {
    await signOut(auth);
    return true;
  } catch (error) {
    console.error("登出失败:", error);
    return false;
  }
};

3. 修正onAuthStateChanged的loading逻辑 #

不管用户是否登录，auth状态确定后都结束loading：

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    setCurrentUser(user);
    setLoading(false); // 状态已确认，结束loading
    if (!user) {
      route.push("/");
    }
    setInitialLoading(false);
  });
  return unsubscribe;
}, [route]); // 添加route到依赖，避免lint警告

4. 修复第三方登录的authProvider字段 #

// Google登录部分
await addDoc(collection(db, "users"), {
  uid: user.uid,
  name: user.displayName,
  authProvider: "google", // 原代码写为facebook
  email: user.email,
});

// Facebook登录部分
await addDoc(collection(db, "users"), {
  uid: user.uid,
  name: user.displayName,
  authProvider: "facebook", // 原代码写为google
  email: user.email,
});

验证修复 #

完成上述修改后，点击退出按钮时：

• signOut(auth)会触发onAuthStateChanged回调，将currentUser设为null
• Context值会实时更新，组件能获取到最新的未登录状态
• 页面会自动跳转到首页

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