NextJS中组件渲染正常但控制台抛出Server Error TypeError的原因及解决方法

• 代码采用了Firebase v8及以下版本的命名空间写法，但当前项目安装的是Firebase v9+模块化版本，导致firebase.apps不存在，读取其length属性时触发TypeError。
• 额外问题：初始化后的app实例并没有firebase()方法，这行代码后续也会引发错误，只是被前面的错误优先触发。

方案1：适配Firebase v9+模块化语法（推荐） #

修改firebase.js代码如下：

// 导入Firebase核心模块与Firestore模块
import { initializeApp, getApps, getApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "my api code",
    authDomain: "mywebsitename.firebaseapp.com",
    projectId: "mywebsitenameid",
    storageBucket: "mywebsitename",
    messagingSenderId: "senderid",
    appId: "appid"
};

// 避免重复初始化App实例
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

// 获取Firestore数据库实例
const db = getFirestore(app);

export { db };

方案2：兼容旧版命名空间语法（不推荐） #

安装Firebase兼容包：

npm install firebase/compat/app firebase/compat/firestore

修改代码为：

import * as firebase from "firebase/compat/app";
import "firebase/compat/firestore";

const firebaseConfig = {
    apiKey: "my api code",
    authDomain: "mywebsitename.firebaseapp.com",
    projectId: "mywebsitenameid",
    storageBucket: "mywebsitename",
    messagingSenderId: "senderid",
    appId: "appid"
};

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

export { db };

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