TypeError：_firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection不是函数

这是我第一次在StackOverflow上提问。我正在做一个学校项目，我是Firebase和JavaScript的初学者。我在试着做一个Tinder的克隆。Reaction告诉我这部分代码有错误。起初我有不同的错误，但它们与Firebase语法相关，我立即修复了它们，但现在我不知道这个错误是什么意思。我的代码在localhost上工作了一瞬间(我看到了我的应用程序)，然后出现错误。

import React, { useEffect, useState } from 'react';
import TinderCard from 'react-tinder-card';
import database from './firebase';
import './SwipeCards.css';

...

function SwipeCards() {

...

useEffect(() => {
        database.collection('buddies').onSnapshot((snapshot) => setBuddies(snapshot.docs.map((doc) => doc.data())));
    }, []); 

...

}

对于其他人遇到的类似问题，我尝试了两种解决方案，即： (在我的tinderCards.js中)

database.firestore().collection('buddies')...

和(在我的Firebase.js中)

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

...

const firebaseApp = initializeApp(firebaseConfig);
const database = getFirestore(firebaseApp);
export default database;

但两个都不管用。如果需要，我可以发布更多的代码。如有任何帮助，我们将不胜感激。

sdk

您使用的是新的模块化推荐答案(V9)，它不再使用firebase.firestore()命名空间。我建议您按照documentation了解新语法：

import database from './firebase';
import { doc, onSnapshot, collection, query, where, onSnapshot } from "firebase/firestore";

useEffect(() => {
  const q = query(collection(db, "buddies"))
  const unsub = onSnapshot(q, (querySnapshot) => {
    console.log("Data", querySnapshot.docs.map(d => doc.data()));
  });
}, [])