cannot fetch firestore data from react app

Question

Below are my security rules for firestore database:

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

Below is my code to fetch data:

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

users is the name of the collection in the firestore. It has one document.

But I get an error on console:

Cannot read forEach property of undefined

what am I missing? Please help me to find the solution of above problem.

Thank You!

Suzuna Minami · Accepted Answer · 2021-05-30 11:10:29Z

1

You must use either of the following

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

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

Or just use onSnapshot

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

answered May 30, 2021 at 11:10

Suzuna Minami

4294 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gratis Devs Over a year ago

Thanks, its working. But the code I have shown in the question was taken from a tutorial. why it isn't working?

Renaud Tarnec · Accepted Answer · 2021-05-30 17:21:37Z

0

Your code does not work because there is no doc property for a QuerySnapshot. The property which returns an array of all the documents in the QuerySnapshot is named docs.

So you need to do data.docs.forEach(...);

You probably made a typo while copying the code from the tutorial.

edited May 30, 2021 at 17:21

answered May 30, 2021 at 13:21

Renaud Tarnec

83.4k10 gold badges99 silver badges130 bronze badges

Collectives™ on Stack Overflow

cannot fetch firestore data from react app

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related