Firebase v9 Next.js 导出 getFirestore 导致错误“无法读取未定义的属性 'getProvider'”

Question

import { initializeApp, getApps, getApp } from "@firebase/firestore";
import { getFirestore } from "@firebase/firestore";

const firebaseConfig = {
  ...config
};

export default function firebaseApp() {
  if (!getApps().length) {
    firebaseApp = initializeApp(firebaseConfig);
  } else {
    firebaseApp = getApp(firebaseConfig);
  }
}

export const db = getFirestore(firebaseConfig)

在我尝试将 getFirestore 导出为 db 之前，一切正常。它在 CRA 中运行良好，但是当我尝试在 Next.js 中执行此操作时，我收到错误“无法读取未定义的属性 'getProvider'”。

我已经尝试了所有我能想到的方法：同时使用了 yarn 和 npm，创建了多个项目，在另一个文件中导入了 getFirestore。我不确定是什么原因造成的。

Answer 1

我不明白问题的确切原因。我相信这与 SSR 和客户端之间的某种不匹配的 firestore 实例有关，或者可能需要 await 来启动它，但现在这对我有用：

export const db = () => getFirestore(firebaseApp)

另外，您可能希望将firebaseApp 传递给getFirestore，而不是firebaseConfig。