Nuxt3中如何将useFetch返回结果转换为<CustomType>类型

• 基础语法错误：函数返回类型声明错误，Promise<CustomType>[]表示「元素为Promise<CustomType>类型的数组」，和预期的「返回CustomType数组的Promise」完全不符，正确的返回类型应该是Promise<CustomType[]>；同时返回语句的变量名大小写错误，定义的变量是小驼峰customTypeList，返回时写的大驼峰CustomTypeList，TS会直接报未定义变量错误。
• 类型断言逻辑完全错误：Nuxt3中useFetch的返回值不是接口直接返回的响应数据，而是一个包含data、error、pending、refresh等属性的组合式对象，直接把整个返回对象断言为CustomType[]，运行时拿到的根本不是数组，后续调用数组方法会直接报错。
• 类型使用不规范：useFetch本身内置泛型支持，硬写as强转的方式会跳过TS的类型校验，后续接口字段变更时不会有任何类型提示，容易埋下隐式bug。

useFetch原生支持传入泛型指定接口返回的data类型，不需要额外做硬类型断言，参考实现如下：

async getAllFiscalYear(): Promise<CustomType[]> {
  // 传入泛型指定响应data的类型为CustomType[]，解构拿到data字段
  const { data: customTypeList } = await useFetch<CustomType[]>('/api/list')
  // data是Ref响应式对象，取.value拿到原始数组，做空值兜底避免返回undefined
  return customTypeList.value ?? []
}

补充注意事项 #

• 如果使用懒加载版本useLazyFetch，需要先判断请求完成状态、或者搭配watch监听data变化后再取值，避免拿到初始的null/undefined值。
• 如果需要做运行时的类型校验（避免接口返回字段和定义的TS类型不匹配），可以搭配schema校验库（比如zod），结合useFetch的transform选项在数据返回时做校验转换，不要单纯靠TS类型或者as断言做类型保障。

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