React中Select组件无法正常渲染Firebase数据，选项内容混乱

问题核心是你直接将Firebase文档中的Gyms数组作为Select选项的label值，导致整个数组内容被拼接成单个选项。要实现每个健身房单独作为选项，需将数组中的每个元素拆分为独立的选项对象。

修改后的代码 #

useEffect(() => {
    const fetchData = async () => {
        const collectionRef = collection(db, "categories");
        try {
            const snapshot = await getDocs(collectionRef);
            // 用flatMap展开每个文档的Gyms数组，生成独立选项
            const fetchedData = snapshot.docs.flatMap((doc) => {
                const gyms = doc.data().Gyms || []; // 处理Gyms为空的情况
                return gyms.map(gym => ({
                    value: `${doc.id}-${gym}`, // 生成唯一value（可按需调整）
                    label: gym
                }));
            });
            setData(fetchedData);
        } catch (error) {
            console.error('获取数据错误: ', error);
        }
    };
    fetchData();
}, []);

关键说明 #

• 使用flatMap替代map：flatMap会将每个文档返回的Gyms数组展开，最终得到一维的选项数组，避免嵌套结构导致的选项合并。
• 空值处理：通过doc.data().Gyms || []确保即使Gyms字段不存在或为空，也不会抛出数组操作错误。
• 唯一标识value：用${doc.id}-${gym}生成全局唯一的选项值，你也可以根据业务需求（比如健身房自身的唯一ID）调整这个值的生成规则。

调整后，Select组件就能将每个健身房名称显示为单独的选项。

内容的提问来源于stack exchange，提问作者David Akinola