Firebase 9 + NextJS 12 - 预计 collection() 的第一个参数是 CollectionReference、DocumentReference 或 FirebaseFirestore

我正在尝试在 NextJS 应用程序中创建一个简单的 Firestore 数据库查询。

I have clientApp.ts看起来像这样：

import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
// const storage = getStorage();
// const analytics = getAnalytics(firebase);

export { firebaseApp, db };

然后我有一些 index.js 文件，其中有一个方法：

    import { collection, query, where, getDocs, getDoc, onSnapshot, doc, limit } from 'firebase/firestore';
    import { db } from '../firebase/clientApp';

    export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
      try {
        const videoRef = collection(db, 'videos');
        const q = query(videoRef, limit(8));
        const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
          console.log(doc.id, ' => ', doc.data());
        });
        return { props: { x: [] } };
      } catch (err) {
        console.log(err);
        return { props: { x: [] } };
      }
    };

它将最终在catch出现错误的块：

FirestoreError [FirebaseError]: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
    at collection (file:///C:/Develop/petrolhat-nextjs/node_modules/@firebase/firestore/dist/index.node.mjs:19949:19)
    at getServerSideProps (webpack-internal:///./pages/index.tsx:108:88)
    at Object.renderToHTML (C:\Develop\petrolhat-nextjs\node_modules\next\dist\server\render.js:479:26)
    at async doRender (C:\Develop\petrolhat-nextjs\node_modules\next\dist\server\next-server.js:1389:38)
    at async C:\Develop\petrolhat-nextjs\node_modules\next\dist\server\next-server.js:1484:28
    at async C:\Develop\petrolhat-nextjs\node_modules\next\dist\server\response-cache.js:63:36 {
  code: 'invalid-argument',
  toString: [Function (anonymous)]
}

如果我在使用之前使用 console.log(db) ，它将返回：

Firestore {
  _credentials: FirebaseCredentialsProvider {
    authProvider: Provider {
      name: 'auth-internal',
      container: [ComponentContainer],
      component: [Component],
      instances: Map(0) {},
      instancesDeferred: Map(0) {},
      instancesOptions: Map(0) {},
      onInitCallbacks: Map(0) {}
...

所以在我看来 DB 设置正确。所以我尝试用谷歌搜索很多并找到一个可能的解决方案，我还在 StackOverflow 中检查了这些主题，但没有任何帮助：

1. Firebase 期望 collection() 的第一个参数是 CollectionReference、DocumentReference 或 FirebaseFirestore
2. Firestore v9 预计 collection() 的第一个参数是 CollectionReference、DocumentReference 或 FirebaseFirestore
3. V 9 FirebaseError：预计 collection() 的第一个参数是 CollectionReference、DocumentReference 或 FirebaseFirestore

因此，如果有人知道我做错了什么，那就太好了！