这是我的班级项目，一旦用户登录并点击成员页面，我希望他们能看到所有其他成员谁之前登录的列表，并显示他们每个人有多少个项目，项目的长度为... a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a

此页面为：

这是我的火力数据：

真的谢谢大家！
这是我在Membres.js文件中的代码

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 => {
                return {
                    ...doc.data(),
                    id: doc.id
                };
            }));
        });
        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> //Need this to work
                {console.log(membre.projets)}
            </li>
        ))}
    </ul>
 );
};
export default Membres;