Firebase未登出却返回null用户问题（React项目v8.2.0）

核心问题分析 #

你的代码中出现用户未登出但userAuth返回null的情况，主要有以下几个原因：

1. onAuthStateChanged使用不当
   每次调用getToken都绑定新的状态监听，会导致重复监听堆积。当Firebase Auth会话失效时，监听触发userAuth=null，但代码未处理这种情况，导致Promise既不resolve也不reject，最终token获取失败。

2. 手动token管理与Firebase会话不同步
   你通过localStorage手动存储token，但Firebase自身的Auth会话（依赖refresh token）可能已过期（默认refresh token有效期7天）或因浏览器缓存清理、隐私模式等原因丢失，此时onAuthStateChanged会返回null。

3. 不必要的手动过期检查
   Firebase的getIdToken方法会自动检测token是否过期，无需手动解码判断，你的手动检查逻辑反而可能忽略Firebase内部的token刷新机制。

代码修复方案 #

替换原getToken函数，利用Firebase Auth内置的状态管理和token刷新机制：

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import { firebaseConfig } from "./config.js"

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();

export const getToken = () =>
  new Promise(async (resolve, reject) => {
    try {
      // 等待Auth状态完全就绪，确保获取到最新用户状态
      await auth.authStateReady();
      const user = auth.currentUser;

      if (!user) {
        reject(new Error("用户会话已失效，请重新登录"));
        return;
      }

      // getIdToken会自动刷新过期token，forceRefresh=true强制获取最新token
      const idToken = await user.getIdToken(true);
      localStorage.setItem("token", idToken);
      resolve(idToken);
    } catch (error) {
      console.error("获取token失败:", error);
      reject(error);
    }
  });

export default firebase;

关键优化点 #

• 用auth.authStateReady()替代重复监听：确保获取到Firebase Auth的最新状态，避免重复绑定onAuthStateChanged导致的逻辑混乱。
• 自动处理token刷新：getIdToken会自动检查token有效期，过期时自动调用refresh token获取新token，无需手动解码判断。
• 明确处理无用户场景：当user为null时直接reject，避免Promise挂起，同时给出明确错误提示。
• 统一错误处理：添加try/catch捕获所有异常，便于排查问题。

额外注意事项 #

• Firebase的refresh token默认有效期为7天，若用户7天内未打开应用，refresh token会过期，此时必须重新登录。
• 确保浏览器允许localStorage（Firebase Auth默认依赖localStorage持久化会话），若浏览器禁用localStorage，Firebase会降级为session级持久化，关闭标签页后会话丢失。

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