Nuxt 3.9.3中useFetch返回值TypeScript类型报错求助

问题分析 #

Nuxt 3.9.3 更新后，useFetch的返回值类型定义发生调整，data、pending等变量明确为Ref包装对象，但你的组件Props定义的是原始类型（如boolean、数组），导致TypeScript类型校验不匹配。项目能正常运行是因为Vue模板会自动解包Ref，但TS静态检查无法识别这种自动解包逻辑。

解决方法 #

1. 修正组件Props类型 #

检查并调整FilterActions、LotsViews的Props定义，匹配useFetch返回的Ref类型：

<!-- LotsViews.vue 示例 -->
<script setup lang="ts">
// 如果需要响应式数据，直接接收Ref类型
defineProps<{
  pendingLotes: Ref<boolean>
  lotes: Ref<SerializeObject[] | null>
}>()

// 如果只需要原始值，保持原始类型即可（后续通过解包传递）
// defineProps<{
//   pendingLotes: boolean
//   lotes: SerializeObject[] | null
// }>()
</script>

2. 给useFetch显式指定返回类型 #

显式声明接口可以消除SerializeObject的模糊类型推断，让TS更准确识别数据结构：

// 先定义数据类型接口
interface Lot {
  id: number
  // 补充你的字段定义
}

const { data, pending } = await useFetch<Lot[]>('/api/lot')

3. 手动解包适配原始类型Props #

如果组件Props必须使用原始类型，可通过unref辅助TS识别解包后的值：

<template>
  <LotsViews
    :pending-lotes="unref(pending)"
    :lotes="unref(data)"
  />
</template>

或者在脚本中提前处理为响应式的原始值：

const { data: dataRef, pending: pendingRef } = await useFetch<Lot[]>('/api/lot')
const pending = computed(() => unref(pendingRef))
const data = computed(() => unref(dataRef))

4. 临时降级Nuxt版本 #

若上述方案无法快速适配，可临时降级到无问题的版本，修改package.json后重新安装依赖：

{
  "devDependencies": {
    "nuxt": "^3.8.2"
  }
}

5. 调整Nuxt TypeScript配置 #

确保类型检查配置正确，若需临时跳过TS报错可关闭类型检查（不推荐长期使用）：

// nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    typeCheck: false
  }
})

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