Next.js报错Cannot read properties of undefined (reading 'collection')如何解决

问题原因及修复方案 #

1. 补充firebase.js中的Firestore依赖导入

Firebase v8 所有扩展服务都需要单独引入才能挂载到实例上，你当前只引入了storage服务，没有引入Firestore，导致初始化的app实例上没有firestore方法，定义的db变量本身就是undefined。
修改后的firebase.js代码：

import "firebase/app";
import "firebase/storage";
// 新增引入Firestore服务
import "firebase/firestore";

const firebaseConfig = {
  apiKey: "my_key",
  authDomain: "my_domain",
  projectId: "my_id",
  storageBucket: "my_storage_bucket",
  messagingSenderId: "my_message_send",
  appId: "my_app_id"
};

const app = !firebase.apps.length ? firebase.initializeApp(firebaseConfig) : firebase.app() ;

const db = app.firestore();
const storage= firebase.storage();

export { db, storage }; 

2. 修正InputBox.js中的db导入路径

你当前是从firebase/app官方包导入db，官方包不会导出你自己封装的db实例，需要从你本地的firebase配置文件导入，假设firebase.js和InputBox.js在同一目录下，修改导入语句：

// 错误写法
// import { db } from "firebase/app";
// 正确写法，路径根据你的文件实际目录结构调整
import { db } from "./firebase";
import firebase from "firebase/app";

修改后重新运行项目即可解决报错。

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