React Query useQueries报错：Cannot read properties of undefined (reading 'map')

错误原因 #

你的错误大概率来自两个核心问题：

1. 对useQueries返回值的错误解构 #

useQueries的返回值是查询结果数组（每个元素对应单个useQuery的返回对象，包含data、isLoading、isError等属性），但你调用钩子时使用了对象解构：

const { data: clientSurveys, isError: isClientSurveysError, isLoading: isClientSurveysLoading } = useClientSurveys(dummyIds);

数组本身没有data、isError这些属性，因此clientSurveys会被赋值为undefined。若后续代码尝试对clientSurveys调用map方法，就会触发「Cannot read properties of undefined (reading 'map')」错误。

2. 钩子内部的参数边界处理缺失 #

虽然你传入的是硬编码数组，但如果surveysIds在某个渲染周期意外变为undefined或null（比如父组件传参的异步更新、条件渲染导致参数缺失），surveysIds && surveysIds.map(...)会返回undefined，若后续逻辑依赖该返回值的数组方法，也可能触发类似错误。

解决方案 #

修正调用时的状态处理方式 #

既然useClientSurveys返回的是数组，需用数组逻辑处理结果：

const dummyIds = [
  '1234534324326',
  '3487236482376'
];

// 获取查询结果数组
const clientSurveyQueries = useClientSurveys(dummyIds);

// 聚合整体加载/错误状态
const isClientSurveysLoading = clientSurveyQueries.some(query => query.isLoading);
const isClientSurveysError = clientSurveyQueries.some(query => query.isError);
// 提取所有查询的data
const clientSurveys = clientSurveyQueries.map(query => query.data);

优化钩子的参数边界处理 #

为避免surveysIds为undefined时的map报错，可通过两种方式优化：

// 方案1：给参数设置默认空数组
function useClientSurveys(surveysIds = []) {
  const { isAdmin } = useAdminStatus();
  return useQueries(
    surveysIds.map(surveyId => ({
      queryKey: ['clientSurvey', surveyId],
      queryFn: () => getSurvey(surveyId),
      enabled: !isAdmin && surveysIds.length > 0,
    }))
  );
}

// 方案2：明确处理undefined/null情况
function useClientSurveys(surveysIds) {
  const { isAdmin } = useAdminStatus();
  return useQueries(
    surveysIds ? surveysIds.map(surveyId => ({
      queryKey: ['clientSurvey', surveyId],
      queryFn: () => getSurvey(surveyId),
      enabled: !isAdmin && !!surveysIds,
    })) : []
  );
}

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