Reactjs 获取用于分页的firestore收集记录计数

我有一个表来显示用户集合，包括搜索过滤器。现在我想添加一个MaterialUI分页，在这里我想传递总记录计数。 分页效果很好。我怎么能得到这个

谢谢你的帮助

表和表分页代码

 <Table className={classes.table}>
            <TableHead>
              <TableRow className={classes.tableHeader}>
                <TableCell >#</TableCell>
                <TableCell ></TableCell>
                <TableCell>Name</TableCell>
                <TableCell align="right">Phone</TableCell>
                <TableCell align="right">Role</TableCell>
                <TableCell align="right">Service</TableCell>
                <TableCell align="right">Location</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {filteredList && filteredList
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map(row => (
                <TableRow key={row.id}>
                  <TableCell>{items++}</TableCell>
                  <TableCell align="right">
                    <Link to={'/admin/profile/' + row.id} key={row.id} >
                      <Tooltip title="View Profile">
                        <UserIcon/>
                      </Tooltip>
                    </Link>
                  </TableCell>
                  <TableCell component="th" scope="row">
                    {row.sp_Name}
                  </TableCell>
                  <TableCell align="right">{row.sp_Phone}</TableCell>
                  <TableCell align="right">{row.sp_Role}</TableCell>
                  <TableCell align="right">{row.sp_Service}</TableCell>
                  <TableCell align="right">{row.sp_Location}</TableCell>

                  {/* <TableCell align="right">
                    <ApproveIcon onClick={this.handleClickDialogOpen} className={classes.icon} />
                  </TableCell> */}
                  <TableCell align="right">
                    <Tooltip title="Delete">
                      <DeleteIcon onClick={() => this.handleClickDialogOpen(row.id)} className={classes.icon} />
                      {/* <DeleteIcon onClick={() => deleteSP(row.id)} className={classes.icon} /> */}
                    </Tooltip>
                  </TableCell>

                </TableRow>
              ))}
            </TableBody>
          </Table>
          <TablePagination
          rowsPerPageOptions={[5, 10, 25]}
          component="div"
          //count={5}
          count ={filteredList.length} -- I want to pass count
          rowsPerPage={this.state.rowsPerPage}
          page={this.state.page}
          backIconButtonProps={{
            'aria-label': 'Previous Page',
          }}
          nextIconButtonProps={{
            'aria-label': 'Next Page',
          }}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
        />

#
名称
电话
角色
服务
位置
{filteredList&&filteredList
.slice（第页*rowsPerPage，第页*rowsPerPage+rowsPerPage）
.map（行=>(
{items++}
{row.sp_Name}
{row.sp_Phone}
{row.sp_Role}
{row.sp_Service}
{row.sp_Location}
{/* 
*/}
this.handleClickDialogOpen（row.id）}className={classes.icon}/>
{/*deleteSP（row.id）}className={classes.icon}/>*/}
))}

Firestore不记录集合中的文档数量。如果你需要它，你必须自己储存并保持最新。有关此示例，请参阅和上的文档

---

另请参见：

当您需要对集合执行用户自定义查询并正确执行分页时，这不是一个很好的答案。这方面有什么改进吗？