React Query中useQueries传入异步参数遇undefined报错问题

我使用useDocument钩子从Firebase获取用户数据：

const [user, isUserLoading, isUserError] = useDocument(
  doc(getFirestore(app), 'users', currentUserId)
);

需要获取user对象中的数组：

const currentUserSurveys = user && user?.data().surveys;

现在想将这个字符串数组currentUserSurveys传入以下钩子：

const clientSurveys = useClientSurveys(currentUserSurveys);

该钩子定义如下：

function useClientSurveys(surveysIds) {
  const { isAdmin } = useAdminStatus();

  const clientSurveysQueries = useQueries({
    queries: surveysIds?.map(surveyId => {
      return {
        queryKey: ['clientSurvey', surveyId],
        queryFn: () => getSurvey(surveyId),
        enabled: !!surveysIds && surveysIds.length > 0 && !isAdmin,
      };
    }),
  });
  return clientSurveysQueries;
}

遇到报错：

Cannot read properties of undefined (reading 'map')

原本以为enabled配置项可以确保仅在surveysIds已定义时执行查询，但问题仍存在，该如何解决？

• 问题根源：useQueries要求queries参数必须是数组类型，哪怕是空数组。你用了surveysIds?.map，但当surveysIds为undefined时，这个表达式会返回undefined，直接传给useQueries就会触发报错——和enabled配置无关，因为enabled控制的是查询是否执行，而queries参数本身的合法性检查是更早的步骤。

• 修复方案1：给queries兜底空数组
  修改useClientSurveys钩子，确保queries始终是数组：

  function useClientSurveys(surveysIds) {
    const { isAdmin } = useAdminStatus();
  
    const clientSurveysQueries = useQueries({
      queries: surveysIds?.map(surveyId => {
        return {
          queryKey: ['clientSurvey', surveyId],
          queryFn: () => getSurvey(surveyId),
          enabled: !!surveysIds && surveysIds.length > 0 && !isAdmin,
        };
      }) || [], // 当map返回undefined时，用空数组兜底
    });
    return clientSurveysQueries;
  }
  

• 修复方案2：提前规范化参数
  在钩子开头先把surveysIds转为合法数组，避免后续操作出错：

  function useClientSurveys(surveysIds) {
    const { isAdmin } = useAdminStatus();
    // 确保参数始终是数组，undefined/null时转为空数组
    const validSurveysIds = Array.isArray(surveysIds) ? surveysIds : [];
  
    const clientSurveysQueries = useQueries({
      queries: validSurveysIds.map(surveyId => {
        return {
          queryKey: ['clientSurvey', surveyId],
          queryFn: () => getSurvey(surveyId),
          enabled: validSurveysIds.length > 0 && !isAdmin,
        };
      }),
    });
    return clientSurveysQueries;
  }
  

• 额外优化：配合加载状态减少无效调用
  在调用钩子的地方，结合用户数据的加载状态，提前传入合法数组：

  // 用户加载中或数据未就绪时，传入空数组
  const currentUserSurveys = isUserLoading ? [] : user?.data()?.surveys || [];
  const clientSurveys = useClientSurveys(currentUserSurveys);
  

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