React集成Firebase Authentication时出现谷歌登录错误求助

1. 核对Firebase版本与导入逻辑 #

Firebase v9+采用模块化API，旧版命名空间写法会触发错误，按以下方式调整：

模块化导入（v9+） #

// 初始化Firebase
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";

const firebaseConfig = { /* 你的配置内容 */ };

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();

// 登录处理函数
const handleGoogleLogin = async () => {
  try {
    const result = await signInWithPopup(auth, provider);
    console.log("登录成功：", result.user);
  } catch (err) {
    console.error("登录失败：", err);
  }
};

命名空间写法（v8及以下） #

import firebase from 'firebase/app';
import 'firebase/auth';

const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();

const handleGoogleLogin = () => {
  auth.signInWithPopup(provider)
    .then(res => console.log("登录成功：", res.user))
    .catch(err => console.error("登录失败：", err));
};

2. 确认Firebase控制台配置 #

• 进入Firebase控制台→目标项目→Authentication→登录方法
• 找到Google登录选项，确保开关处于启用状态，且已填写有效的项目支持邮箱并保存。

3. 统一Firebase依赖版本 #

查看package.json中firebase依赖版本，确保无多版本冲突，执行以下命令更新到最新稳定版：

npm install firebase@latest

4. 清除缓存并重启项目 #

# 清除旧依赖缓存
npm clean-install
# 重启开发服务
npm start

内容的提问来源于stack exchange，提问作者i send you mincraft i am david