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

错误原因 #

• 你的firebase.js文件中，执行firebase.initializeApp(firebaseConfig)时未将返回的实例赋值给app变量，后续调用app.firestore()时app为未定义状态，导致db初始化失败最终为undefined，调用db.collection时触发报错。
• 你未在firebase.js中导入Firestore依赖，且混用了Firebase v9模块化API与v8命名空间API的写法，也会导致初始化异常。
• 你当前npm安装的是v9及以上版本的Firebase，直接使用v8的写法需要导入兼容包，否则模块无法识别。

解决方案 #

第一步：修正firebase.js代码 #

直接替换为以下内容，保留你原有的调用逻辑无需额外修改：

// 导入v8兼容包适配旧写法
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';

const firebaseConfig = {
  apiKey: "<mykey>",
  authDomain: "<domain>",
  projectId: "<projectId>",
  storageBucket: "<storageBucket>",
  messagingSenderId: "<messagingSenderId>",
  appId: "<appId>"
};

// 初始化时赋值给app变量
if(!firebase.apps.length){
  const app = firebase.initializeApp(firebaseConfig)
}

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

// 如果需要用到firebase全局实例可以加这行导出
export default firebase;
export { db, storage };

第二步：修正inputbox.js的多余导入 #

删除inputbox.js中无效的导入语句，仅保留db的导入即可：

// 删掉这行无效导入
// import firebase from "../firebase";
// 保留这行即可
import { db } from "../firebase";

修改完成后重启项目即可正常提交数据，之前注释的时间戳字段也可以正常启用。

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