React中使用Firestore获取集合指定文档的特定字段值

基础信息 #

• 数据库结构：集合lunch下包含mon、tue、web、thu、fri五个文档，每个文档包含dessert、main、side、soup四个字段
  
• 预期目标：获取集合全量文档后检索映射，返回指定字段的单个值，例如读取tue文档下的dessert字段，预期返回Banana & Coconut Tapioca Pudding
• 异常表现：实际运行返回了所有文档下的dessert字段全量数据
  

问题根因 #

现有代码存在两处逻辑错误：

1. 渲染逻辑无筛选：遍历menu数组时对所有元素都渲染data.dessert，相当于输出所有工作日的甜品字段，没有针对文档ID做匹配过滤
2. 列表key绑定无效：<li>标签的key绑定了不存在的menu.tue属性，React无法正确识别列表项唯一性

修复实现 #

方案1：仅展示指定文档的指定字段 #

如果只需要输出单个目标字段（比如周二的甜品），不需要遍历全量数组渲染，直接通过find方法匹配对应ID的文档即可：

import { useState, useEffect } from 'react';
import { collection, getDocs } from 'firebase/firestore';
// 替换为项目中实际的Firebase实例、组件引入路径
import { db } from '@/utils/firebase';
import SubNav from '@/components/SubNav';

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

    useEffect(() => {
        fetchMenu();            
    }, []);

    async function fetchMenu() {
        try {
            const menuCollection = collection(db, 'lunch');
            const querySnapshot = await getDocs(menuCollection);
            // 直接展开文档数据，避免嵌套data层，简化后续取值
            const menuList = querySnapshot.docs.map(doc => ({
                id: doc.id,
                ...doc.data()
            }));
            setMenu(menuList);
        } catch (error) {
            console.log(error.message);
        }
    }

    // 匹配目标文档，兜底空对象避免未加载完成时取值报错
    const tuesdayMenu = menu.find(item => item.id === 'tue') || {};

    return (
        <>
            <SubNav content="Menu" />
            <div className="App">
                <p>周二甜品：{tuesdayMenu.dessert}</p>
            </div>
        </>
    );
}

方案2：全量按天展示所有餐食字段 #

如果需要展示所有工作日的完整餐单，按文档ID区分渲染即可：

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

    useEffect(() => {
        fetchMenu();            
    }, []);

    async function fetchMenu() {
        try {
            const menuCollection = collection(db, 'lunch');
            const querySnapshot = await getDocs(menuCollection);
            const menuList = querySnapshot.docs.map(doc => ({
                id: doc.id,
                ...doc.data()
            }));
            setMenu(menuList);
        } catch (error) {
            console.log(error.message);
        }
    }

    // 文档ID与中文星期映射
    const weekTextMap = {
        mon: '周一',
        tue: '周二',
        web: '周三',
        thu: '周四',
        fri: '周五'
    }

    return (
        <>
            <SubNav content="Menu" />
            <div className="App">
                <ul>
                    {menu.map((dayMenu) => (
                        // 用文档唯一ID作为列表key
                        <li key={dayMenu.id}>
                            <h4>{weekTextMap[dayMenu.id]}</h4>
                            <p>主菜：{dayMenu.main}</p>
                            <p>配菜：{dayMenu.side}</p>
                            <p>汤品：{dayMenu.soup}</p>
                            <p>甜品：{dayMenu.dessert}</p>
                        </li>
                    ))}
                </ul>
            </div>
        </>
    );
}

注意事项 #

• 拉取Firestore文档数据时，可直接将doc.data()展开到返回对象中，减少不必要的嵌套层级，简化后续取值逻辑
• 列表渲染的key必须使用稳定唯一的字段，Firestore自带的文档ID是最优选择
• 取单个文档字段时优先使用数组find方法匹配ID，不要遍历全量数组渲染后再做筛选，避免不必要的DOM渲染

内容的提问来源于stack exchange，提问作者Chris Ho