Javascript 如何使用ReactJS读取FireBase实时数据库中存储的“所有”用户

我按照Firebase Web说明将经过身份验证的用户存储到实时数据库中。现在我想创建一个管理员用户，可以访问所有用户配置文件。我使用useffect调用带有.on侦听器的数据库，如果我使用console.log，我可以看到我的数据，但我对如何显示snapshot.val有点迷茫。我尝试过用foreach重写我的fetch代码，并从数据库中指定概要文件，但当我将数据传递给我的子组件时，似乎什么都不起作用。我知道我只是在检索和存储错误的信息。 这是我的数据结构 实时数据库用户

这是我的GMDashboard.js

import { db } from '../../../firebase'
import PlayerCard from './PlayerCard'

export default function GMDashboard() {

    const [playerData, setPlayerData ] = useState()

    useEffect(() => {
        const players = db.ref(`users/`)
        const listener = players.on('value', snapshot => {
            if(!snapshot.exists()){
                setPlayerData([])
                return;
            }
           
            setPlayerData(snapshot.val())
        });

        return () => players.off('value', listener)

    }, [])

    return (
        <div className="gmDashboard-container">
            <div className="gmDashboard_Header-container">
                <h2>Game Master Dashboard</h2>
            </div>
            <div className="gmDashboard_Body-container">
                <div className="gmDashboard_Data_Cards">
                    <div>
                        <h3>Players &amp; Characters</h3>
                        {console.log(playerData)}
                        {/* <PlayerCard playerData={playerData} /> */}
                        {/* {playerData.map(player =>{
                            return  <PlayerCard player={player} />
                        })} */}
                    </div>
                    <div>
                        <h3>Stats</h3>
                    </div>
                </div>
                <div className="gmDashboard_Data_Cards">
                    <div>
                        <h3>Player Management</h3>
                    </div>
                    <div>
                        <h3>Invite a Player</h3>
                    </div>
                </div>
            </div>
        </div>
      
    )
}

这是我的PlayerCard.js，只有一个显示名

import React from 'react'

export default function PlayerCard(props) {
    const {
       displayName,
    } = props
    return (
        <div>
            <h4>DisplayName: {displayName}</h4>
        </div>
    )
}

---

到底是什么问题？数据量？分页？在我看来，你的PlayerCard道具名称是playerData，而不是displayName。我需要一些帮助，了解如何解析每个用户的UID下的数据，并仅提取配置文件，以便显示编辑器、游戏管理员、电子邮件和displayName等属性。我的目标是让游戏管理员能够编辑游戏规则，并授权另一个GM。我发布了一个屏幕截图，显示了我在实时数据库中的数据。任何建议都非常感谢。我找到了一篇关于React Native的文章，使用了相同的概念，并设法在这里显示了我想要的代码const records=[]snapshot.forEachuserSnapshot=>{let userKey=userSnapshot.key；let userData=userSnapshot.val.profile；//console.loguserKey//console.loguserSnapshot.val.profile records.push{id:userKey，profile:userData}setPlayerDatarecords```