React项目Firebase的signInWithRedirect与getRedirectResult无返回结果如何解决

核心问题排查 #

• 检查auth实例是否统一：你给出的初始化代码中仅导出了app和GoogleAuthProvider实例，未初始化并导出auth实例，若调用signInWithRedirect和getRedirectResult时使用的不是同一个auth实例，会导致重定向结果无法被正常捕获
• getRedirectResult参数错误：该方法仅需传入auth实例即可，无需传入第二个provider参数，多余参数会导致方法执行异常
• useEffect执行时机问题：空依赖数组的useEffect会在组件首次挂载时立即执行，此时auth可能尚未完成初始化，同时如果承载该逻辑的组件不是根组件，路由跳转时可能被卸载导致逻辑未执行
• 无兜底监听逻辑：仅依赖getRedirectResult获取结果，未加全局用户状态监听做兜底

修正后代码示例 #

1. Firebase 初始化逻辑（firebase.js） #

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  // 替换为你的Firebase配置
};

export const app = initializeApp(firebaseConfig);
// 必须正确初始化并导出auth实例，全局所有auth相关操作都使用这个导出的实例
export const auth = getAuth(app);
export const provider = new GoogleAuthProvider();

2. 根组件登录&结果获取逻辑 #

import { useEffect } from "react";
import { signInWithRedirect, getRedirectResult, GoogleAuthProvider, onAuthStateChanged } from "firebase/auth";
import { auth, provider } from "./firebase.js"; // 替换为你的firebase配置文件路径

function App() {
  const signInWithGoogle = () => {
    signInWithRedirect(auth, provider);
  };

  useEffect(() => {
    // 处理重定向登录结果
    getRedirectResult(auth)
      .then((result) => {
        if (result) {
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          const user = result.user;
          // 此处添加登录成功后的业务逻辑
          console.log("登录成功", user);
        }
      })
      .catch((error) => {
        // 打印完整错误信息便于排查
        console.error("登录错误", error);
        const errorCode = error.code;
        const errorMessage = error.message;
        const email = error.email;
        const credential = GoogleAuthProvider.credentialFromError(error);
      });

    // 添加全局用户状态监听兜底，避免重定向结果丢失
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        // 此处可复用登录成功后的业务逻辑
        console.log("全局监听获取到登录用户", user);
      }
    });

    // 组件卸载时取消监听
    return () => unsubscribe();
  }, [auth]); // 将auth加入依赖数组，保证实例更新后逻辑重新执行

  return (
    <div>
      <button onClick={signInWithGoogle}>谷歌登录</button>
      {/* 其他业务逻辑 */}
    </div>
  );
}

export default App;

额外注意事项 #

• 确保本地开发地址和线上部署地址都已添加到Firebase控制台「身份验证-设置-授权域」列表中，地址必须完全匹配，包括协议、域名、端口
• React18 开发环境的StrictMode会导致useEffect执行两次，第一次执行时就会消费掉重定向结果，第二次执行会拿到null，可以临时关闭StrictMode验证逻辑是否正常，该问题不会出现在生产环境
• 建议升级到Firebase SDK最新稳定版，避免旧版本已知bug导致重定向结果获取失败

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