Next.js集成Firestore遇模块未找到及版本更新失败问题求助

核心问题分析 #

• 版本认知偏差：npm firebase -v查的是全局Firebase CLI版本，不是项目本地依赖的Firebase SDK版本，package.json里的^9.8.0才是项目要使用的SDK版本，两者不冲突。
• 导入逻辑错误：Firebase v9用的是模块化API，你却混用了v8的命名空间导入写法；还错误用了仅服务端可用的firebase-admin来初始化前端应用，这直接导致模块找不到。
• 废弃API引用：import firebase from 'firebase'在Firebase v9中已被移除，这是触发编译错误的直接原因。

具体修复步骤 #

1. 确保项目依赖的Firebase SDK版本正确 #

执行命令重新安装指定版本的Firebase SDK，清理可能的缓存问题：

npm uninstall firebase
npm install firebase@9.8.0

如果还是有异常，直接清理依赖文件后重装：

rm -rf node_modules package-lock.json
npm install

2. 修正Firebase配置文件代码 #

你的config.js有两处致命错误，替换为以下符合v9模块化规范的代码：

// 只导入前端需要的Firebase模块
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "xxxx",
    authDomain: "xxxx",
    projectId: "xxxx",
    storageBucket: "xxxx",
    messagingSenderId: "xxxx",
    appId: "xxxx",
    measurementId: "xxxx"
};

// 初始化前端Firebase应用
const app = initializeApp(firebaseConfig);
// 获取Firestore实例
const db = getFirestore(app);

export default db;

注意：firebase-admin是给Node.js服务端（比如Next.js的API路由）用的工具，绝对不能在前端代码里用，否则不仅会引发模块错误，还可能泄露服务端密钥。

3. 验证版本并重启服务 #

查看项目本地Firebase SDK的实际版本：

npm list firebase

确认输出显示firebase@9.8.0后，重启Next.js开发服务：

npm run dev

额外提示 #

• Firebase v9的模块化API支持树摇，能大幅减小打包体积，建议长期使用这种写法。
• 如果暂时需要兼容v8的旧代码，可以用compat过渡版本，但不推荐长期依赖：

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';

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