Next.js中使用useSWR返回值调用Array.find报错的解决方法

前端修复：处理异步数据的初始状态 #

这个错误核心是调用data.find()时，data为undefined——因为useSWR是异步请求，组件初始化阶段还没拿到接口返回值，直接调用数组方法就会报错。可以通过以下方式解决：

方式1：先判断数据存在再执行操作 #

const {data} = useSWR("api/data", fetcher, {refreshInterval: 10000})

// 确保data存在后再调用find
if (data) {
  console.log(data.find(d => d.id === "123"))
}

方式2：用可选链简化判断 #

const {data} = useSWR("api/data", fetcher, {refreshInterval: 10000})
// 可选链会在data为undefined时直接返回undefined，避免报错
console.log(data?.find(d => d.id === "123"))

方式3：给data设置默认数组 #

// 解构时给data默认值为空数组，确保始终能调用数组方法
const {data = []} = useSWR("api/data", fetcher, {refreshInterval: 10000})
console.log(data.find(d => d.id === "123"))

后端API检查：确保返回合法数组 #

后端返回的events可能存在结构异常，导致前端拿到的不是预期数组，也会引发后续错误。可以做以下优化：

1. 过滤无效的查询参数 #

如果matchString是空字符串，split(",")会得到[""]，无效的查询可能返回异常结果。先过滤空值：

const promises = matchString.split(",")
  .filter(match => match.trim()) // 去掉空字符串和纯空格的参数
  .map(async (match: string) => {
    try {
      const res = await Events.find({ name: match });
      events.push(res[0]);
    } catch (error) {
      console.error("model/route.js error", error); // 打印具体错误信息，方便排查
      // 不要把错误对象push到events，会破坏前端数据结构
    }
  })

2. 校验查询结果 #

避免把undefined或无效值推入数组：

const res = await Events.find({ name: match });
// 确保查询结果存在且有数据时再推入
if (res && res.length > 0) {
  events.push(res[0]);
}

3. 优化错误处理 #

不要将错误对象混入返回数组，否则JSON序列化后会导致前端拿到非预期结构。建议只记录错误日志，跳过出错的查询项。

排查辅助步骤 #

1. 打开浏览器开发者工具的Network面板，查看api/data接口的返回内容，确认是否是合法的JSON数组；
2. 在后端Promise.all(promises)后打印events，检查是否包含错误对象或非预期值。

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