Firebase返回非空数组无法获取元素、调用filter方法问题求助

核心原因说明 #

• 控制台显示空数组但展开有内容：这是浏览器控制台的惰性求值特性导致的，打印时存储的是数组的引用，你点击展开时才会读取数组当前的最新值。打印时异步数据请求还未完成，数组为空，等你展开时请求已执行完毕，数组已经被填充了数据，所以会出现这个视觉偏差。
• 无法调用.filter方法：你的useState没有设置初始值，默认值为undefined，在异步请求未完成的阶段，你直接对undefined调用数组方法当然会报错。
• 第一个元素为undefined：一是你调用的fetchCrosses方法和你贴出的fetchCross方法不匹配，返回的结构和你定义的类型不对应；二是你遍历学生ID列表时可能存在空ID，导致返回了无效项。

具体修复步骤 #

1. 补全useState初始值
   将自定义Hook里的状态初始化改为空数组，避免初始状态为undefined：

const [crosses, setCrosses] = useState<{ id: string, docs: firebase.firestore.DocumentData[] }[]>([])

2. 修正fetchCrosses实现
   你贴出的是接收单个学生ID的fetchCross方法，但Hook里调用的是接收学生ID列表的fetchCrosses方法，需要保证该方法返回的结构完全匹配你定义的类型，参考实现如下：

export const fetchCrosses = async (
  currentUserId: string,
  allStudentsIds: string[]
) => {
  // 先过滤掉无效的空ID，避免返回无效项
  const validStudentIds = allStudentsIds.filter(id => !!id)
  const requestList = validStudentIds.map(async studentId => {
    const crossData = await fetchCross(currentUserId, studentId)
    return {
      id: studentId,
      docs: crossData
    }
  })
  return Promise.all(requestList)
}

3. 增加防御性判断
   在使用crosses的地方增加防御性判断，或者直接使用可选链操作符避免报错：

// 已设置初始空数组时可直接调用filter
const filteredCrosses = crosses.filter(item => item.docs.length > 0)
// 未设置初始值时用可选链兜底
const filteredCrosses = crosses?.filter(item => item.docs.length > 0) || []

4. 正确调试数组值
   如果要查看打印时数组的真实值，避免控制台惰性求值的干扰，可以用以下两种方式打印：

// 方式1：序列化后再解析，拿到打印时的快照
console.log('数组快照：', JSON.parse(JSON.stringify(crosses)))
// 方式2：直接打印数组长度，长度不会受惰性求值影响
console.log('数组长度：', crosses.length)

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