无法从 React 应用程序获取 Firestore 数据答案

【问题标题】：cannot fetch firestore data from react app无法从 React 应用程序获取 Firestore 数据
【发布时间】：2021-08-17 23:16:02
【问题描述】：

以下是我的 firestore 数据库安全规则：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

下面是我获取数据的代码：

fetchUsers=async()=>{
        const db=firebase.firestore();
        const response=db.collection('users');
        const data=await response.get();
        data.doc.forEach(item=>{console.log(item)})
    }

users 是 Firestore 中集合的名称。它有一个文档。

但我在控制台上收到错误：

Cannot read forEach property of undefined

我错过了什么？请帮助我找到上述问题的解决方案。

谢谢！

【问题讨论】：

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

您必须使用以下任一方式

import { useParams } from 'react-router-dom'

function YYY(props){
    const { id } = useParams();
    db.collection('users').doc(id).get().then((doc) =>{console.log(doc.data())})
}

或者直接使用onSnapshot

db.collection('users').onSnapshot((snapshot) => {
    snapshot.docs.map((doc) => {
        console.log(doc.data());
    }
}

【讨论】：

谢谢，它的工作。但是我在问题中显示的代码取自教程。为什么它不起作用？

【解决方案2】：

您的代码不起作用，因为QuerySnapshot 没有doc 属性。返回QuerySnapshot 中所有文档的数组的属性名为docs。

所以你需要做data.docs.forEach(...);

您在复制教程中的代码时可能打错了。

【讨论】：