Property 'forEach' does not exist on type

Ionic Framework Ionic React
1

Hello, I am trying to fetch data from firestore but getting an error that Property ‘forEach’ does not exist on type ‘DocumentSnapshot’
I’d really appreciate any guidance on fixing this error. Thanks!

const listMemPanel = async () => {
    try {
      let list: members[] = []
      const res = await firebase.firestore().collection('Membership').doc('Subscription').get();
      res.forEach((doc: { data: () => { (): any; new(): any; id: any; name: any; code: any; email: any; }; }) => {
          let obj = {
              id: doc.data().id,
              name:doc.data().name,
              code:doc.data().code,
              email:doc.data().email
          };
          list.push(obj)
      });
      setListMembers(list)
  } catch (error) {}
}
2

Console.log res and look at the results

I wonder if it is an array as u r querying a doc, not a collection

Check the api https://firebase.google.com/docs/firestore/query-data/get-data

1 Like
3

I did that but I keep getting an error stating “Property ‘collection’ does not exist on type ‘App’.”

const listMemPanel = async () => {
    try {
        let list: members[] = []
        const membersRef = db.collection('Membership').doc('Subscription');
        const doc = await membersRef.get();
        if (!doc.exists) {
            console.log('No such document!');
        } else {
            console.log('Document data:', doc.data());
        }
      doc.forEach((doc: { data: () => { (): any; new(): any; id: any; name: any; code: any; email: any; }; }) => {
          let obj = {
              id: doc.data().id,
              name:doc.data().name,
              code:doc.data().code,
              email:doc.data().email
          };
          list.push(obj)
      });
      setListMembers(list)
  } catch (error) {}
}
4

Plse include here the result from console.log of doc and doc.data()

5

Is this it?

Property 'collection' does not exist on type 'App'.  TS2339

    18 |     try {
    19 |         let list: members[] = []
  > 20 |         const membersRef = db.collection('Membership').doc('Subscription');
       |                               ^
    21 |         const doc = await membersRef.get();
    22 |         if (!doc.exists) {
    23 |             console.log('No such document!');
6

Well then you need to trace back and look at how u define db…

What is it?

7

I have this on my firebaseConfig file

import firebase from 'firebase';
import 'firebase/firestore';

  const firebaseConfig= {
    apiKey: " ",
    authDomain: " ",
    databaseURL: " ",
    projectId: " ",
    storageBucket: " ",
    messagingSenderId: " ",
    appId: " ",
    measurementId: " "
  };
  // Initialize Firebase
  const fireConfig = firebase.initializeApp(firebaseConfig);
  const db = firebaseConfig.firestore();
  /*firebase.analytics();*/
  export default fireConfig;

I imported db from the above file to the file I am currently using.
import db from ‘…/…/data/firebaseConfig’;

8

I figured it out. When importing const from another module. I needed to use curly braces

import { db } from '../firebaseConfig';
9

This seems to me a very unlikely and unusual pattern to retrieve access to the firebase database object. As a starter, you are trying to get a db property which does not/should not exist in your config file

A more common pattern if you use the JS SDK is to import * as firebase from 'firebase/app' and so forth. Then you can access the firestore() method via const db= firebase.firestore()

I am not sure if you are working Angular (the post refers to React). Otherwise it would be nicer to use Angularfire

Regards

Tom

10

I’m working with react. I’ll make the changes.
Thank you.