React项目中Firebase getIdToken函数未执行问题求助

问题排查与修复 #

1. 核心问题：Firebase SDK版本混用 #

你同时使用了Firebase的Compat兼容包和新版模块化API，导致Auth实例不统一：

• 登录操作通过模块化的getAuth()完成，但获取用户时调用的是兼容包的firebase.auth().currentUser，两者属于不同的Auth实例，因此currentUser始终为null，直接导致getIdToken()无法执行，且因跨实例的逻辑问题未触发catch回调。

2. 分步修复方案 #

第一步：统一使用模块化API

移除兼容包导入，全部使用新版模块化API：

// 移除兼容包导入
// import firebase from "firebase/compat/app";
import { initializeApp, getAuth } from "firebase/app";
import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";

将Firebase初始化逻辑抽离到单独配置文件（如firebase.config.js），确保全局只有一个Auth实例：

// firebase.config.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = { /* 你的项目配置 */ };

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

在Login组件中导入统一的Auth实例：

import { auth } from "./firebase.config";

第二步：直接从登录结果获取ID Token

不要依赖currentUser（其更新存在时序延迟），直接使用signInWithPopup返回的result.user调用getIdToken()：

const handleGoogleSignI = () => {
  const provider = new GoogleAuthProvider();
  
  signInWithPopup(auth, provider)
    .then(async (result) => {
      const { displayName, email } = result.user;
      const signedinuser = { name: displayName, email };
      setLoggedInUser(signedinuser);

      // 直接从登录结果的user对象获取ID Token
      const idToken = await result.user.getIdToken(true);
      sessionStorage.setItem('token', idToken);
      console.log(idToken);

      history.replace(from);
    })
    .catch((error) => {
      console.error("登录或获取Token失败:", error);
    });
};

第三步：调试验证

• 调用getIdToken()前，先打印auth.currentUser确认用户状态，避免空值调用。
• 检查浏览器控制台的警告信息，Firebase会明确提示SDK混用的问题。

可选：监听全局Auth状态 #

如果需要在组件中实时监听用户登录状态，使用模块化的onAuthStateChanged：

import { useEffect } from "react";
import { onAuthStateChanged } from "firebase/auth";

// 组件挂载时监听Auth状态
useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    if (user) {
      user.getIdToken(true).then(idToken => {
        console.log("实时获取的Token:", idToken);
      });
    }
  });

  return () => unsubscribe(); // 组件卸载时取消监听
}, []);

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