無法從集合 firebase firestore 中獲取所有文檔

Question

我不明白為什么我無法從 firebase firestore 數據庫中獲取數據。

我的錯誤：

[FirebaseError：collection() 的第一個參數應為 CollectionReference、DocumentReference 或 FirebaseFirestore]

我的 firebase 配置文件設置正確，我可以用這個 model 添加數據：

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

我的文件結構：我的結構圖片

我已經正確地聲明了我的 state，我有 async await with try catch。

我從 firebase 文檔中使用了這個

事件列表.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([]);

  useEffect(() => {
    const fetchEvents = async () => {
      try {
        const querySnapshot = await getDocs(collection(db, EVENTS_COLLECTION));
        querySnapshot.forEach((doc) => {
          console.log(doc.id, " => ", doc.data());
        });
        setEvents(
          querySnapshot.forEach((doc) => {
            doc.id, " => ", doc.data();
          })
        );
      } catch (error) {
        console.error(error);
      }
    };
    fetchEvents();
  }, [setEvents]);

  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:
    "https://calendar-f3025-default-rtdb.europe-west1.firebasedatabase.app",
  projectId: "calendar-f3025",
  storageBucket: "calendar-f3025.appspot.com",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

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

我嘗試從我的事件集合中獲取所有文檔。 我的目標是使用 firebase firestore 數據庫制作一個帶有事件管理器的日歷

Answer 1

在 firebase.js 中，您可以這樣導出數據庫：

export const db = getFirestore(app);

這是一個命名導出，因此您需要一個命名導入：

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

您導入的方式適用於默認導出，並且在您的情況下會導致undefined 。 因此 firebase 抱怨collection的第一個參數不正確（未定義）。

您可以在此處閱讀有關導入的更多信息。

Answer 2

如果 EVENTS_COLLECTION 正確返回集合名稱，請嘗試這個，然后您將獲得所有文檔，否則在您編寫 EVENTS_COLLECTION 的地方使用"Collection Name" 。

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)
          },
     })   
};