skip to Main Content

I don’t understand why I can’t get data from firebase firestore database.

my error :

[FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore]

My config file with firebase config is correctly set, I can add Data with this model :

{ item: { ...event, date } }

My files structures : picture of my structure

I have correctly declared my state, I have async await with try catch.

I have used this from firebase documentation

EventList.js

import { FlatList, View, Text, StyleSheet } from "react-native";
import React, { useState, useEffect } from "react";
import { EVENTS_COLLECTION } from "../commons/constants";
import db from "../commons/services/firebase";

const EventList = () => {
  const [events, setEvents] = useState([]);



  return (
    <View>
      <FlatList
        data={events}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.eventContainer}>
            <Text style={styles.eventName}>{item.name}</Text>
            <Text style={styles.eventDate}>{item.date.toString()}</Text>
          </View>
        )}
      />
    </View>
  );
};

firebase.Js

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL:
    "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

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

I try to get all documents from my events collection.
My goal is to make an Calendar with event manager with firebase firestore database

2

Answers


  1. In firebase.js you export db like this:

    export const db = getFirestore(app);
    

    This is a named export, therefore you will need a named import:

    import { db } from '../commons/services/firebase'
    // or
    // import * as config from '../commons/services/firebase'
    // const db = config.db
    

    The way you import is for default exports and results in your case with undefined. Therefore firebase complains that the first argument to collection is not correct (it’s undefined).

    You can read more about imports here.

    Login or Signup to reply.
  2. Try this one if EVENTS_COLLECTION returns the name of the collection correctly then you will get all documents otherwise use "Collection Name" where you write EVENTS_COLLECTION.

    const fetchEvents= async () => { 
         await db.collection(EVENTS_COLLECTION).onSnapshot({
              error: e => console.error(e),
              next: (querySnapshot) => {
                   var data = [];
                   var i = 0;
                   querySnapshot.forEach(doc => {
                        data.push(doc.data());
                        console.log(doc.id, " => ", doc.data());
                   });
                   setEvents(data)
              },
         })   
    };
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search