Firebase Reactjs - ae.collection 不是函数

Question

我无法弄清楚这里的错误是什么。我制作了教程 Firebase/website，并在我的项目中做了同样的事情。我试图在我的 React 网站上打印出我在 Firebase 上创建的集合，但在 db.collection 行出现错误：Uncaught (in promise) TypeError: ae.collection is not a function

component.js：

// React
import { useState, useEffect } from "react";
import { db, collection, getDocs  } from '../../../firebase.js';

const [holder, setHolder] = useState([]); // update
  
  db.collection("holder").onSnapshot((snapshot) => {
    setHolder(
      snapshot.docs.map((doc) => ({
        id: doc.id,
        data: doc.data(),
      }))
    );
  });
  console.log({ holder });

更新：firebase.js 下面

    // Import the functions you need from the SDKs you need
    import { initializeApp } from "firebase/app";
    import { getAnalytics } from "firebase/analytics";
    import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries
    
    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
...
    };
    
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
    
    export const db = getFirestore(app);

谢谢！

Answer 1

您正在使用具有全新语法的 Firebase Modular SDK，您必须在代码中使用相同的语法。尝试将代码重构为：

// React
import { useState, useEffect } from "react";
import { db } from '../../../firebase.js';
import { onSnapshot, collection } from 'firebase/firestore'

const [holder, setHolder] = useState([]); // update
 
onSnapshot(collection(db, 'holder'), (snapshot) => {
  setHolder(
    snapshot.docs.map((doc) => ({
      id: doc.id,
      data: doc.data(),
    }))
  );
})

还要确保您的getFirestore 导入来自firebase/firestore，而不是来自firebase.js 中的lite，否则您将遇到this issue：

import { getFirestore } from 'firebase/firestore';