為什么我不能顯示來自 firebase 的更多數據？

Question

我知道我在某個地方犯了一個錯誤。 我正在嘗試將我的 firebase 數據庫中的所有食品顯示到我的餐廳網站上。 到目前為止，我只能顯示“all_Day_Special”而不能顯示其他任何內容。

import './Home.css';

import React from "react";
//import Categories from "./Categories";
//import items from "./data";
import { all_Day_Special, menu_Add_Ins, menu_Appetizers, menu_Beef, menu_Chicken, menu_Chow_Mein,
  menu_Combinations, menu_Deep_Fried_Goodiness, menu_Dessert, menu_Flavor, menu_Fried_Rice, menu_Hot,
  menu_Pork, menu_Seafood_Platter, menu_Sides, menu_Vegetable, menu_Whats_Cooking, menu_Wing } from './firebase/firebaseConfig';
import { useState, useEffect, ReactDOM} from 'react';
import {collection, doc, setDoc, addDoc, getDocs} from 'firebase/firestore';

function Menu() {

  const [food, setFood] = useState([]);

  useEffect(() => {
    const getFood = async () => {
        const data = await getDocs(all_Day_Special, menu_Add_Ins, menu_Appetizers, menu_Beef, menu_Chicken, menu_Chow_Mein,
          menu_Combinations, menu_Deep_Fried_Goodiness, menu_Dessert, menu_Flavor, menu_Fried_Rice, menu_Hot,
          menu_Pork, menu_Seafood_Platter, menu_Sides, menu_Vegetable, menu_Whats_Cooking, menu_Wing);
        setFood(data.docs.map((doc) => ({ ...doc.data(), id: doc.id})));


        

    };
    getFood();
  }, []);

return(
      <div className='menu'>
        <div className="top-section"></div>
          {food.map((item) => {
            return (
              <article key={item.id} className="menu-items">
              <img src={item.ImageURL} alt={item.Name} className="photo" />
              <div className="item-info">
                <header>
                  <h4>{item.Name}</h4>
                  <h4 className="price">${item.Price}</h4>
                </header>
                <p className="item-text">{item.Description}</p>
              </div>
            </article>
          );
        })}
        </div>
    );
  }
  
  export default Menu;

我在想我需要做更多的常量？ 它看起來確實是重復的，我相信它可以以更有效的方式完成。

Answer 1

我很確定getDocs()函數的第一個參數是一個collection或一個query ，所以如果你想像你正在做的那樣從多個 collections 獲取文檔，你需要在單個 collections 上重復調用getDocs() 。

您正在做的事情可能會導致 Firestore 僅返回來自all_Day_Special的文檔。

Answer 2

你不能像那樣獲取多個 collections，但主要是你必須設置你的 firebase 太復雜了......這就是我能做到的

Firebase這是我的 firebase 的結構：我可以先有一個名為"menu"的collection ，然后讓 firebase 為我生成doc.id ，在我的document中將具有以下 object 結構......

name: "shrimp",
price: 10,
category: "sea",
special: true //all_day_special as a boolean,
spicy: boolean //you can add whatever categories

這樣您就可以撥打一個 function 並輕松獲得您需要的一切，然后您的 firebase 將如下所示：

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

//use query to get specific items
useEffect(()=>{
const q = query(collection(db, "menu"), where("special", "==", true));
const getFood = async () => {
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => setFood({ ...doc.data(), id: doc.id}))
}
getFood()
},[])

//to get all items in the menu collection use the below::

const querySnapshot = await getDocs(collection(db, "menu"));
  querySnapshot.forEach((doc) => setFood({ ...doc.data(), id: doc.id}));