Next.js项目集成Firebase时auth与Firestore调用报错

问题原因 #

你当前使用的是Firebase旧版的命名空间导入写法，但安装的Firebase版本大概率是v9+——这个版本默认采用模块化API，原有的命名空间方法（firebase.auth()、firebase.firestore()）的TypeScript类型定义已不再默认支持，导致编译报错。

两种解决方式 #

方式一：改用Firebase v9+模块化API（推荐） #

模块化写法更轻量化，符合现代前端打包优化趋势，代码示例：

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

const firebaseConfig = {
  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
};

// 初始化Firebase应用
const app = initializeApp(firebaseConfig);
// 获取Auth实例
const auth = getAuth(app);
// 获取Firestore实例
const firestore = getFirestore(app);

export { app, auth, firestore };

方式二：兼容旧命名空间写法（启用Compat模式） #

如果想保留原有代码结构，可以使用Firebase提供的兼容包，修改导入路径即可：

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";

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

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const firestore = firebase.firestore();

export default { firebase, auth, firestore };

核心变化是把firebase/app改成firebase/compat/app，对应模块也替换为compat路径，这样TypeScript就能识别原有的命名空间方法了。

额外检查项 #

• 确认Firebase版本：执行npm list firebase查看版本，v9+才需要上述调整
• 环境变量验证：确保.env.local中的变量都以NEXT_PUBLIC_开头，Next.js才会将其暴露给客户端代码
• TypeScript配置：检查tsconfig.json中moduleResolution字段是否为node或bundler，保证模块解析正常

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