我正在开发一个使用Firebase Firestore进行数据库操作的React应用程序。我最近升级到了Firebase版本9，并切换到模块化语法来导入Firebase服务。
但是，我在尝试访问Firestore中的集合方法时遇到了错误。错误消息为“类型'Firestore'上不存在属性'collection'。”
下面是我的代码片段：

import React, { useRef } from "react";
import { FormEvent } from "react";
import contactcss from "./Contact.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Card from "../../components/ui/Card";
import {
  faInstagram,
  faFacebook,
  faLinkedin,
  faDiscord,
} from "@fortawesome/free-brands-svg-icons";
import emaillogo from "../../resources/email-logo.png";

import firebase from 'firebase/app';
import 'firebase/firestore';
import { getFirestore } from 'firebase/firestore';
//import { randomString } from "../../App";

// testing config toggle
let isTesting = true

// Your web app's Firebase configuration
// testConfig goes here
const testConfig = {
  apiKey: "AIzaSyD1Z8u6LAQDrwBAd-t-aMzoYFpgrfjFH0E",
  authDomain: "gdscusyd-test.firebaseapp.com",
  projectId: "gdscusyd-test",
  storageBucket: "gdscusyd-test.appspot.com",
  messagingSenderId: "430942619633",
  appId: "1:430942619633:web:e4b3661fac99d31cd5e650",
  measurementId: "G-DCF0X0L8QY"
};

// prodConfig goes here
const prodConfig = {
  apiKey: "AIzaSyCdgEs7mefO_Woe3UJA7lgdlrtiqjpmfCI",
  authDomain: "gdsc-usyd.firebaseapp.com",
  databaseURL: "https://gdsc-usyd-default-rtdb.firebaseio.com",
  projectId: "gdsc-usyd",
  storageBucket: "gdsc-usyd.appspot.com",
  messagingSenderId: "971303209941",
  appId: "1:971303209941:web:a6d9fa662f48a20916cb5c",
  measurementId: "G-HB1NEN3G3J"
};

let appConfig = isTesting ? testConfig : prodConfig;

// Initialize Firebase
const app = firebase.initializeApp(appConfig);

// Initialize db
const db = getFirestore(app);

// generate random string of specified length
export function randomString(length: number) {
  var result = '';
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  
for (var i = 0; i < length; i++) {
  result += characters.charAt(Math.floor(Math.random() * characters.length));
}
​
return result;
}
​

export async function sendData(data: any, id: string) {
  await db.collection('contact-form').doc(id).set({ content: data });
}

​
const processData = async (event: FormEvent) => {
event.preventDefault();
​
// @ts-ignore
const elementsArray = [...event.target.elements];
​
const data = elementsArray.reduce((acc, element) => {
  if (element.id) {
    acc[element.id] = element.value;
  }
​
  return acc;
}, {});

try {
  if (data.name === '') throw("Name cannot be left empty")
  if (data.email === '') throw("Email cannot be left empty")
  if (data.message === '') throw("Message cannot be left empty")
​
  await sendData(data, randomString(10))
}
}

function Contact() {
  return (
    <div>
      <div>
        <div className={contactcss.background}>
          <img
            className={contactcss.emaillogo}
            src={emaillogo}
            alt="Contact Us"
          />
          <div className={contactcss.contact}>Contact Us</div>
        </div>
      </div>

      <Card
        title="We're keen to hear from you!"
        imageUrl="https://images.app.goo.gl/D6m6hHMnP1gjsKKV7"
        body=""
        /* onSubmitForm={submitFormHandler} */ // Placeholder comment
      />

      <div className={contactcss.whitebackground}>
        <div className={contactcss.socials}>
          <h1>Follow Our Socials</h1>
          <p className={contactcss.socialmedia}>
            Stay connected with GDSC USYD by following us on our social media
            channels:
          </p>
          <div>
            <a href="https://www.instagram.com/gdscusyd/">
              <FontAwesomeIcon
                className={contactcss.instagram}
                icon={faInstagram}
              />
            </a>

            <a href="https://www.facebook.com/gdsc.usyd">
              <FontAwesomeIcon
                className={contactcss.facebook}
                icon={faFacebook}
              />
            </a>

            <a href="https://discord.com/channels/872033047652990986/872033047652990989">
              <FontAwesomeIcon
                className={contactcss.discord}
                icon={faDiscord}
              />
            </a>

            <a href="https://www.linkedin.com/company/gdsc-usyd/">
              <FontAwesomeIcon
                className={contactcss.linkedin}
                icon={faLinkedin}
              />
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Contact;

字符串
我已经根据迁移指南从Firebase的模块化语法导入了initializeApp、getFirestore、collection、doc和set，但我仍然收到错误。
我尝试了各种解决方案，例如重新排序导入，重新检查我的Firebase配置，以及更新我的Firebase依赖项，但似乎没有解决问题。
有人能帮助我理解为什么我得到这个错误，以及我如何才能正确地访问Firestore中的集合方法与Firebase v9模块化语法？
提前感谢您的任何帮助！