使用Firebase GoogleAuthProvider创建谷歌登录弹窗报错求助

API 探路者

2026-7-24

解决Firebase谷歌登录弹窗的"Cannot read properties of undefined (reading 'create')"错误

错误核心原因

这个报错是因为GoogleAuthProvider未被正确初始化或引用，大概率是你实现signInWithGooglePopup函数时，缺少Firebase Auth模块的正确导入，或者实例创建逻辑有误。

修正方案

1. 导入必要的Firebase Auth模块

先确保代码中正确导入Firebase Auth相关工具：

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

2. 正确实现`signInWithGooglePopup`函数

你的代码只调用了该函数但未给出实现，以下是标准的正确实现：

// 初始化Firebase Auth实例
const auth = getAuth();

const signInWithGooglePopup = async () => {
  // 创建GoogleAuthProvider实例
  const provider = new GoogleAuthProvider();
  try {
    const result = await signInWithPopup(auth, provider);
    // 可通过result.user获取登录用户信息
    return result;
  } catch (error) {
    // 捕获并处理登录错误
    console.error("谷歌登录失败:", error);
    throw error;
  }
};

3. 调整组件内的调用逻辑

确保signInWithGooglePopup函数在组件作用域内可访问，完整组件代码示例：

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

const SignIn = () => {
  const auth = getAuth();

  const signInWithGooglePopup = async () => {
    const provider = new GoogleAuthProvider();
    try {
      const result = await signInWithPopup(auth, provider);
      console.log(result);
      return result;
    } catch (error) {
      console.error("登录错误:", error);
    }
  };

  const logGoogleUser = async () => {
    const response = await signInWithGooglePopup();
    console.log(response);
  };

  return (
    <div>
      <h1>SignIn Page</h1>
      <button onClick={logGoogleUser}>Sign in with Google Popup</button>
    </div>
  );
};

export default SignIn;