我在react组件中迭代一个集合。对于此选项卡的每一行，我需要向firebase进行额外的查询：

<Tbody>
          {households?.map((household) => (
            <Tr key={household.id}>
              <Td>{household.name}</Td>
              <Td>{household.ownerName}</Td>
              <Td>
                <ul>
                  {household.participants.map((participant) => (
                    <li key={participant.userId}>{participant.userName}</li>
                  ))}
                  //Here I need to retrieve another collection from firestore, which is different for each household.
                </ul>
              </Td>
              <Td>
            </Tr>
          ))}
        </Tbody>

字符串
但我找不到方法。
我试过这个：

{
    let invitesRef = collection(
      db,
      "households",
      household.id,
      "invites"
    );
    invitesRef.onSnapshot((invite) => {
      <li key={invite}>{invite}</li>
    })
    return <div></div>;
  }

型
但我得到了意想不到的令牌，而且它似乎不喜欢常数，...所以我可能走错了路。
我该如何实现这一点？