Firebase Auth实现Google登录时提示GoogleAuthProvider不是构造函数求助

问题原因 #

• Firebase版本不匹配：你当前的代码是Firebase v8及更早版本的命名空间式语法，若本地安装的是v9及以上的模块化版本，API结构完全重构，不再支持命名空间式调用，自然找不到对应构造函数。
• 调用路径错误：GoogleAuthProvider是挂载在全局firebase命名空间的auth属性下，并非挂载在初始化后单个app实例的auth属性下，你若在组件中导入自己封装导出的app实例再调用app.auth.GoogleAuthProvider，本身就是错误写法。

对应解决方案 #

方案1：降级到Firebase v8（适配现有写法） #

直接指定版本重新安装即可：

npm install firebase@8.10.0
# 或者用yarn
yarn add firebase@8.10.0

安装完成后原有代码不需要修改即可正常运行。

方案2：适配Firebase v9+ 模块化写法 #

首先修改Firebase配置文件：

// 你的firebase配置文件，比如src/firebase.js
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const app = initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
});

export const auth = getAuth(app);
export const googleProvider = new GoogleAuthProvider();
export default app;

然后修改组件内的登录函数逻辑：

// 登录组件内导入依赖
import { signInWithPopup } from "firebase/auth";
import { auth, googleProvider } from "你的firebase配置文件相对路径";

const googleLogin = (e) => {
  e.preventDefault();
  signInWithPopup(auth, googleProvider)
    .then((res) => {
      console.log(res);
    });
};

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