Why can't I display more data from firebase?

Question

I know I am making a mistake somewhere. I am trying to display all food items from my firebase database onto my restaurant website. So far, I can only display "all_Day_Special" and not anything else.

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;

I'm thinking I would need to make more constants? It does seem repetitive and I'm sure it can be done in a more efficient way.

Answer 1

I'm pretty sure the getDocs() function's first param is a collection or a query, so if you want to get docs from multiple collections like what you're doing, you need to repeatedly call getDocs() on individual collections.

What you're doing will likely result in Firestore only returning the docs from all_Day_Special.

Answer 2

You can not fetch multiple collections like that, but mainly you must have setup your firebase too complex... here is how I could do it

Firebase Here is how my firebase would be structured: I could first have a collection called "menu" then let firebase generate doc.id for me and in my document will have the following object structure...

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

This way you will be able to call one function and get everything you need easily, then your firebase would look something like this:

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