使用 Firestore 和 React 中的选定文档从集合中获取字段的数据

Question

I am looking to display the data in a field. At this time, my database structure is represented in Firestore like the following: Collection (lunch) => document (mon, tue, web, thu, fri) => field (dessert, main, side, soup)

Firestore database structure

What I am trying to do here is get all the documents from the collection and retrieve it by mapping. The expected result is to return one value in a selected field. For example, I want to display dessert of tue. The result should display "Banana & Coconut Tapioca Pudding". However, it returned to all the data locating on the field. Like the illustrating image below.

Outcome

Here is the code snippet I tried using but it did not work:

export default function Menu() {
const [menu, setMenu] = useState([]);    
useEffect(() => {
    fetchMenu();            
}, []);

useEffect(() => {
    console.log(menu)
}, [menu]);

function fetchMenu() {
    const menuCollection = collection(db, 'lunch')
    getDocs(menuCollection)
    // .then((doc)=>{console.log(doc.data(),doc.id)})
        .then(response => {
            const menuRef = response.docs.map((doc) =>(
                {
                    data:doc.data(),
                    id: doc.id
                }
            ))
            setMenu(menuRef)
            })
        .catch(error => console.log(error.message))
}

return (
    <>
        <SubNav content="Menu"></SubNav>

        <div className="App">
        <ul>
            {menu.map((menu) => (
                <li key={menu.tue}>{menu.data.dessert}</li>
            ))}
        </ul>
            
        </div>
    </>
);

Thank you!

Answer 1

As per your image you your menu looks like

[
 {data: {...}, id: 'mon'},
 {data: {...}, id: 'tue'},
 {data: {...}, id: 'wed'},
]

So while iterating on this array menu.tue won't work you would have to do a if check like this

<ul>
      {menu.map((menu) => (menu.id === 'tue' && 
           <li key={menu.tue}>{menu.data.dessert}</li>
      ))}
</ul>