Firebase 给出 db.collection 不是一个函数答案

【问题标题】：Firebase giving that db.collection is not a functionFirebase 给出 db.collection 不是一个函数
【发布时间】：2021-01-25 01:04:26
【问题描述】：

我正在关注 youtube 上的教程，我已经成功创建了 Firebase 项目并创建了 Firestore 数据库。我创建了一个演示集合，我想从中提取数据，但这样做后我收到此错误：

TypeError: db.collection(...).onShapshot 不是函数

这真的很奇怪，因为我正在学习教程并且在教程中没有任何问题，即使它在我的电脑上返回问题。我将分享完整的代码，希望有人能够帮助我解决它。

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.stack.imgur.com/iwWdf.png

任何帮助都意义重大，因为我整天都在纠结这个问题。谢谢！祝你好运！

【问题讨论】：

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

真正的函数名是onSnapshot

useEffect(() => {
    db.collection("posts").onSnapshot((snapshot) => {
      setPosts(snapshot.docs.map((doc) => doc.data()));
    });
  }, []);

【讨论】：

【解决方案2】：

你有“onShapshot”，但它应该是“onSnapshot”。检查拼写。

【讨论】：

谢谢，我想是太晚了，我还没有检查。再次，非常感谢！