React+Firebase：如何实现成员项目数量的显示功能？

问题背景 #

课程项目中，成员页面需展示所有已登录成员的列表，并通过projets.length显示每个成员的项目数量。目前其余功能正常，但项目数量展示部分报错。

问题原因 #

1. 字段未初始化：Firestore中membres集合的部分文档可能未设置projets字段，或该字段值为null/undefined，直接访问.length会触发Cannot read properties of undefined (reading 'length')错误。
2. 字段类型错误：若projets在Firestore中存储的不是数组类型（比如是对象），则该字段没有length属性，无法获取项目数量。

解决方案 #

方案1：渲染时安全访问（快速修复） #

使用可选链操作符?.和空值合并操作符??，避免直接访问不存在的属性：

<span className="badges">{membre.projets?.length ?? 0}</span>

• ?.：当projets为null或undefined时，会停止后续属性访问，返回undefined
• ?? 0：当结果为undefined时，默认显示0，保证页面正常渲染

方案2：数据获取时统一处理（更严谨） #

在从Firestore获取数据时，提前将projets字段处理为数组，确保后续渲染时不会出现类型问题：
修改useEffect中的数据转换逻辑：

useEffect(() => {
    const unsub = onSnapshot(collection(db, 'membres'), (snapshot) => {
        setMembres(snapshot.docs.map(doc => {
            const data = doc.data();
            return {
                ...data,
                id: doc.id,
                projets: data.projets || [] // 若projets不存在则设为空数组
            };
        }));
    });
    return unsub;
}, []);

这样无论Firestore中projets字段是否存在，membre.projets始终是数组，直接访问.length即可正常获取项目数量。

额外检查 #

建议登录Firebase控制台，确认membres集合中的文档：

• projets字段是否为数组类型（若用于存储项目列表，数组是正确的存储格式）
• 所有文档是否都正确初始化了projets字段

修复后完整代码 #

import { useState, useContext, useEffect } from "react";
import { onSnapshot, collection, addDoc } from 'firebase/firestore';
import { db } from '../../config/firebase';
import { authContexte } from "../../Contexte/authContexte";
import { Link } from "react-router-dom";

const Membres = () =>{
    const ctx = useContext(authContexte);
    const [membres, setMembres] = useState([]);
    
    useEffect(() => {
        const unsub = onSnapshot(collection(db, 'membres'), (snapshot) => {
            setMembres(snapshot.docs.map(doc => {
                const data = doc.data();
                return {
                    ...data,
                    id: doc.id,
                    projets: data.projets || []
                };
            }));
        });
        return unsub;
    }, []);
 return(
    <ul className="list-group">
        {membres.map((membre)=>(
            <li className="list-group-item d-flex justify-content-between align-items-center" key={membre.nom + membre.email}>
                {membre.nom} <p>{membre.email}</p>
                <span className="badges">{membre.projets.length}</span>
                {console.log(membre.projets)}
            </li>
        ))}
    </ul>
 );
};
export default Membres;

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