Next.js中Firebase初始化报错：getFirestore不是函数

你的代码里有几个明确问题导致了报错，直接修正即可解决：

问题1：变量名不匹配 #

你定义的配置对象是clientCredentials，但初始化时误用了未定义的firebaseConfig，这会导致Firebase应用初始化失败，进而引发后续getFirestore调用出错。

问题2：实例名大小写错误 #

你创建的Firebase应用实例是小写的app，但调用getFirestore时写了大写的App，这是未定义变量，直接触发类型错误。

修正后的完整代码 #

import { initializeApp } from "firebase/compat/app";
import "firebase/compat/firestore";
import "firebase/compat/auth";
import { getFirestore } from "firebase/compat/firestore";

const clientCredentials = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

// 修正配置变量名
const app = initializeApp(clientCredentials);   

// 修正实例名大小写
export const DB = getFirestore(app);

// 也可以用Compat模式的简化写法：
// export const DB = app.firestore();

如果之前没安装依赖，先执行安装命令：

npm install firebase
# 或
yarn add firebase

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