我正在按照 YouTube 上的教程操作，并成功创建了 Firebase 项目和 Firestore 数据库。我创建了一个演示集合，我想从中提取数据，但这样做之后，我收到了此错误：

TypeError: db.collection(...).onShapshot is not a function

这真的很奇怪，因为我正在按照教程操作，而且在教程中没有任何问题，即使它在我的 PC 上返回了问题。我将分享完整的代码，希望有人能够帮助我解决它。

import React, { useState, useEffect } from "react";
import { Header, Post } from "./components";
import firebase from "firebase";

import "./App.css";

const firebaseApp = firebase.initializeApp({
  apiKey: "XXXX",
  authDomain: "instagram-clone-2ee86.firebaseapp.com",
  databaseURL: "https://instagram-clone-2ee86.firebaseio.com",
  projectId: "instagram-clone-2ee86",
  storageBucket: "instagram-clone-2ee86.appspot.com",
  messagingSenderId: "222065421214",
  appId: "1:222065421214:web:0206210d4eb74d7925c48f",
  measurementId: "G-G37J67K1FW",
});

function App() {
  const db = firebaseApp.firestore();
  const [posts, setPosts] = useState([]);

  // useEffect => Runs a piece of code based on a specific condition
  useEffect(() => {
    db.collection("posts").onShapshot((snapshot) => {
      setPosts(snapshot.docs.map((doc) => doc.data()));
    });
  }, []);

  return (
    <div className="app">
      <Header />

      <div className="app__posts">
        {posts.map((post) => (
          <Post
            username={post.username}
            caption={post.caption}
            imageUrl={post.imageUrl}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

这是我收到的错误： https://i.sstatic.net/iwWdf.png

任何帮助都将意义重大，因为我整天都被这个问题困扰。谢谢！祝一切顺利！