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

Question

我希望在字段中显示数据。 此时，我的数据库结构在 Firestore 中表示如下： Collection (lunch) => document (mon, tue, web, thu, fri) => field (dessert, main, side, soup)

Firestore 数据库结构

我在这里要做的是从集合中获取所有文档并通过映射检索它。 预期结果是在选定字段中返回一个值。 例如，我想显示周二的甜点。 结果应显示“香蕉和椰子木薯布丁”。 但是，它返回了位于该字段上的所有数据。 如下图所示。

结果

这是我尝试使用但不起作用的代码片段：

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

谢谢！

Answer 1

根据您的图像，您的菜单看起来像

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

因此，在迭代此数组 menu.tue 时，您将不得不像这样进行 if 检查

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