使用FireBase从对象获取数据

Question

当前，我有一个来自FireBase数据库的对象。像这样：

我现在想使用React渲染这些数据：

return (
   <React.Fragment>
      <StyledMain role="main">
        <Layout currentUser={currentUser}>
          <ListCards currentUser={currentUser} />
            {data.map((item, index) => (
              <Card id={Object.keys(item).toString()} key="c" type="chats">
                <CardContent scrollbar={false}>
                  <Grid columns={`${rem(300)} 1fr`} scrollbar={false}>
                    {Object.keys(item).map(function(key, index) {
                      <Text text={item[key]['type'].toString()} />;
                     })}
                  </Grid>
               </CardContent>
             </Card>
           ))}
        </Layout>
     </StyledMain>
   </React.Fragment>
);

具有data包含firebase Widgets对象。 我的目标是渲染Card，其中id是erf4553o459g4，而Text组件将渲染lists 什么是实现此目标的最佳方法？两个map函数听起来有点不必要。

从FireBase获取数据的功能：

const getSingleRefFunction = (ref, callback) => {
  const dataArray = [];

  ref.once('value', snap => {
    dataArray.push(snap.val());
    callback(dataArray);
  });
};