React中如何通过用户ID数组从Firestore批量获取匹配文档集合

1. 优化封装的查询函数 #

首先补全边界情况返回值，避免传入空数组时返回undefined：

export const getFollowers = async (followerIds) => {
  if (followerIds.length > 0) {
    const result = await firebase
      .firestore()
      .collection("users")
      .where("userId", "in", followerIds)
      .get();

    const followers = result.docs.map((item) => ({
      ...item.data(),
      docId: item.id,
    }));
    return followers;
  }
  // 补全空数组返回逻辑
  return []
};

2. 组件内新增状态存储查询结果 #

在组件内引入useState，声明变量存储返回的用户数组：

import { useState, useEffect } from 'react'

export default function FollowerPopUp({ visible, closeWindow, followers }) {
  // 新增状态存储follower列表
  const [followerList, setFollowerList] = useState([])

  // 后续useEffect和return逻辑...
}

3. 处理异步调用拿取返回结果 #

async标注的函数默认返回Promise对象，必须通过await或者.then才能拿到异步返回的结果，修改useEffect内的逻辑如下：

useEffect(() => {
  // 定义异步执行函数
  const fetchFollowers = async () => {
    const result = await getFollowers(followers)
    // 把结果存入state
    setFollowerList(result)
  }
  fetchFollowers()
}, [followers])

你也可以用.then的写法实现同样效果：

useEffect(() => {
  getFollowers(followers).then(result => {
    setFollowerList(result)
  })
}, [followers])

4. 遍历渲染列表 #

拿到存储在followerList的数组后，直接遍历渲染即可：

return (
  <div
    className={`overflow-auto z-30 m-0 p-0 h-2/6 w-3/12  border rounded-xl bg-white text-left fixed ${visible}`}
  >
    <div className="flex border-b border-gray-primary w-full h-8 mt-2 px-5 ">
      <p className="mx-auto font-bold pl-6">Followers</p>
      <img
        src="/images/cancel.png"
        className="cursor-pointer h-5 mt-0.5"
        onClick={closeWindow}
        alt="关闭"
      />
    </div>
    {/* 遍历渲染follower列表 */}
    {followerList.map(item => (
      <FollowerRow
        key={item.docId}
        following={true}
        username={item.username}
        fullName={item.fullName}
      />
    ))}
  </div>
)

注意事项 #

• Firestore的in查询单次最多支持10个匹配值，如果你的followerIds长度可能超过10，需要自行拆分数组做批量查询。
• 如果需要加载态，可以额外新增loading状态，在请求发起前设为true，请求结束后设为false即可。

内容的提问来源于stack exchange，提问作者rreay724