db.collection 不是 React / Firestore 的函数答案

【问题标题】：db.collection is not a function React / Firestoredb.collection 不是 React / Firestore 的函数
【发布时间】：2021-11-05 09:08:19
【问题描述】：

尝试使用 React 将 Firestore 实施到 LinkedIn 克隆中。我相信导入 Firebase/firestore 的新方式如下。

firebase.js

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

然后我初始化了 firebase 配置并创建了一个 const db。

firebase.js

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
 

export {db}

我遇到的问题是在我的“Feed.js”文件上，我试图从 firestore 运行收集功能但收到错误。

feed.js

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

db 在 feed.js 上导入

import { db } from './firebase';

有更新的写法吗？

【问题讨论】：

请提供定义db 的import，您更有可能在该行出现拼写错误，请确保您的问题包含所有需要的代码。还要区分代码何时属于不同的文件，尤其是你贴的前两个代码sn-ps，让问题尽可能的清晰

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

应该是这样的：

onSnapshot(collection(db, 'posts'), (snapshot) => {
    setPosts(snapshot.docs.map((doc) => {
        return {
            id: doc.id,
            data: doc.data()
        }
    })
})

我强烈建议您查看upgradeing from version 8 to the modular Web SDK 上的文档和reading from Firestore 上的文档中的代码示例，因为我们不太可能像这样为您重写所有代码。

【讨论】：

【解决方案2】：

在新的模块化 SDK 中，大部分 API 表面都发生了变化。有关于如何migrate code from the old namespaced SDK here 的文档。

您将使用的大部分相关 Firestore 导出是 listed here。特别是需要使用导出的collection和onSnapshot函数来替换Firestore#collection()和CollectionReference#onSnapshot()。

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

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

useEffect(() => {
  const colRef = collection(db, 'posts');

  const unsubListener = onSnapshot(colRef, snapshot => {
    setPosts(snapshot.docs.map(doc => ({
      id: doc.id,
      data: doc.data()
    })));
  });

  return unsubListener; // <- don't forget to return the unsubscribe function!
},[]);

我建议使用onSnapshot 的观察者版本，这样您就可以优雅地处理错误并提高代码的可读性。

useEffect(() => {
  const colRef = collection(db, 'posts');

  const unsubListener = onSnapshot(colRef, {
    next: (snapshot) => {
      setPosts(snapshot.docs.map(doc => ({
        id: doc.id,
        data: doc.data()
      })));
    },
    error: (err) => {
      // TODO: handle error (signed out? no permission? no connection?)
    }
  });

  return unsubListener; // <- don't forget to return the unsubscribe function!
},[]);

【讨论】：

【解决方案3】：

对我有用的解决方案。

useEffect(() =>{
    const newPost = onSnapshot(collection(db, 'posts'), (snapshot) =>{
    setPosts(snapshot.docs.map(doc => ({...doc.data(), id: doc.id})));
    });
    return newPost
}, []);

感谢@Frank van Puffelen

【讨论】：