Firebase报错：Cannot read properties of undefined (reading 'initializeApp')

你的问题根源在于混合使用了Firebase v9+的模块化API和旧版命名空间API，同时存在语法错误和重复初始化的问题，以下是具体修复步骤：

问题拆解 #

1. 你导入了import { firebase } from '@firebase/app';，但Firebase v9+已不再推荐这种命名空间式导入，该导入会导致firebase对象为undefined，进而触发firebase.initializeApp的报错。
2. 重复初始化Firebase App：既调用了firebase.initializeApp又调用了initializeApp，冗余操作会引发冲突。
3. GoogleAuthProvider已通过模块化方式导入，却错误使用旧命名空间方式创建实例。
4. firebaseConfig中apiKey行末尾缺少逗号，属于语法错误，会导致配置对象解析失败。

修复后的完整代码 #

// 仅保留Firebase v9+的模块化导入
import { initializeApp } from "firebase/app";
import { getAnalytics, logEvent } from "firebase/analytics";
import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import { getFirestore, collection, addDoc, doc, getDoc } from "firebase/firestore";

// 修复语法错误：apiKey行末尾添加逗号
const firebaseConfig = {
  apiKey: "*",
  authDomain: "*",
  databaseURL: "*",
  projectId: "*",
  storageBucket: "*",
  messagingSenderId: "*",
  appId: "*",
  measurementId: "*"
};

// 仅初始化一次Firebase App
const app = initializeApp(firebaseConfig);

// 基于初始化后的app获取各服务实例
const auth = getAuth(app);
const analytics = getAnalytics(app);
const db = getFirestore(app);

// 使用导入的GoogleAuthProvider创建实例
const provider = new GoogleAuthProvider();

// 修正signInWithGoogle的实现，使用模块化的signInWithPopup
export const signInWithGoogle = () => signInWithPopup(auth, provider);

// 导出所需的服务和方法
export { db, analytics, collection, addDoc, doc, getDoc, logEvent };

关键修改说明 #

• 移除import { firebase } from '@firebase/app';，完全使用v9+的模块化API。
• 只调用一次initializeApp初始化App，所有服务实例（auth、firestore等）都基于该app创建。
• 使用导入的GoogleAuthProvider创建实例，替代旧的firebase.auth.GoogleAuthProvider。
• 修复firebaseConfig中的语法错误，添加apiKey行末尾的逗号。
• 将auth.signInWithPopup替换为模块化导入的signInWithPopup，并传入auth和provider参数（v9+ API要求显式传参）。

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