Next.js已安装firebase仍报Can't resolve 'firebase/storage'如何解决

该报错通常由Firebase版本不匹配和配置文件循环导入两个原因导致，可通过以下两种方案解决：

方案1：降级适配现有语法（无需大幅修改代码） #

你当前的代码使用的是Firebase v8版本的命名空间式API，若直接安装最新版Firebase（v9+/v10）会出现路径不兼容问题。

• 先卸载现有Firebase包：yarn remove firebase
• 安装v8稳定版本：yarn add firebase@8.10.0
• 修正firebase配置文件的循环导入错误，将配置文件第一行的import firebase from "./firebase"修改为import firebase from "firebase/app"
• 删除本地缓存并重启开发服务：rm -rf .next && yarn dev

方案2：适配高版本Firebase的模块化API（推荐长期使用） #

如果你希望使用最新版Firebase，需要修改现有代码适配模块化语法：

1. 修改firebase配置文件 #

// 替换原有导入逻辑
import { initializeApp } from "firebase/app";
import { getFirestore, serverTimestamp } from "firebase/firestore";
import { getStorage } from "firebase/storage";

// 此处保留你原来的firebaseConfig配置不变
const firebaseConfig = {
  // 你的配置参数
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const storage = getStorage(app);

export { db, storage, serverTimestamp };

2. 修改业务代码逻辑 #

// 替换原有firebase相关导入
import { db, serverTimestamp } from "../../firebase";
// 删除原有import firebase from "../../firebase"的语句

// sendPost方法内的timestamp字段修改为
timestamp: serverTimestamp()

• 修改完成后删除.next缓存，重启开发服务即可。

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