menu

Questions & Answers

React access to firestore

Hi the below code has to fetch a list of values ​​from firestore database, when i run the code i get the following error what should i do:

Error:

TypeError: firebase__WEBPACK_IMPORTED_MODULE_7_.db.collection is not a function

firebase.js

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

var firebaseConfig = {
  apiKey: 'xx',
  authDomain: 'xx',
  projectId: 'xx',
  storageBucket: 'xx',
  messagingSenderId: 'xx',
  appId: 'xx',
  measurementId: 'G-xxxx',
};

// Initialize Firebase
var app = initializeApp(firebaseConfig);
export const db = getFirestore(app);


 try {
      console.log("recupero lista news_profiles");
      db.collection('news_profiles')
        .get()
        .then((querySnapshot) => {
          console.log(querySnapshot);
          const data = [];
          querySnapshot.forEach((doc) => {
            console.log(doc.id, ' => ', doc.data());
            data.push(doc.data());
          });
          console.log(data);
        })
        .catch((error) => {
          console.log('Error getting documents: ', error);
        });
    } catch (error) {
      console.log('Error: ' + error);
    }
Comments:
2023-01-23 23:10:09
Check out the github repo github.com/Chukwu3meka/Firebase-Auth
2023-01-23 23:10:09
Please revise your post title to ask a clear, specific question. See How to Ask.
Answers(1) :

You have mixed namespaced and modular imports.

Here is an example.

import { collection, getDocs } from "firebase/firestore"; 

const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`);
});

Ensure when reading the docs you are following “web version 9” guides.

Comments:
2023-01-23 23:10:09
You shouldn't duplicate answers in comments. Please delete your comment. Also, never link "here".
2023-01-23 23:10:09
Done. Will add the link back into the answer.