Nuxt3中useFetch报Type instantiation过深错误的解决咨询

环境与依赖 #

当前技术栈：

• Nuxt 3 v3.6.5
• TypeScript v5.1.6

项目依赖列表：

"dependencies": {
    "@prisma/client": "^4.12.0",
    "@vueuse/core": "^9.13.0",
    "consola": "^3.0.1",
    "jsonwebtoken": "^9.0.0",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.5.28",
    "lodash": "^4.17.21",
    "nuxt-swiper": "^1.1.0",
    "pinia": "^2.0.33",
    "swiper": "^9.4.0",
    "vee-validate": "^4.8.4",
    "vue-draggable": "^2.0.6",
    "vuedraggable": "^4.1.0",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@nuxt/image-edge": "1.0.0-28001428.0aa03b6",
    "@nuxtjs/google-fonts": "^3.0.2",
    "@nuxtjs/tailwindcss": "6.6.5",
    "@pinia/nuxt": "^0.4.7",
    "@types/jsonwebtoken": "^9.0.1",
    "@vee-validate/zod": "^4.8.4",
    "nuxt": "^3.6.5",
    "nuxt-icon": "^0.3.3",
    "nuxt-lodash": "^2.4.1",
    "nuxt-security": "^0.12.0",
    "prettier-plugin-tailwindcss": "^0.2.6",
    "prisma": "^4.12.0",
    "sass": "^1.60.0",
    "sass-loader": "^13.2.2",
    "typescript": "^5.1.6"
  },

问题描述 #

使用useFetch时，编辑器持续报错："Type instantiation is excessively deep and possibly infinite"，代码示例：

const { data, error } = await useFetch<Styles>('/api/portfolio_style', {
    method: 'get',
});

已显式指定泛型类型，但问题仍存在。项目运行npm run dev无异常，仅编辑器报错。尝试回滚TypeScript版本无效，怀疑与依赖包或VSCode的TypeScript Vue Plugin (Volar)有关。

解决方法 #

1. 对齐Volar的TypeScript版本 #

确保Volar使用项目本地的TypeScript版本，避免全局版本冲突：

• 打开VSCode设置（快捷键Ctrl+,）
• 搜索typescript.tsdk
• 将路径设置为项目根目录下的node_modules/typescript/lib

2. 禁用Volar的Take Over Mode #

Take Over Mode可能导致类型解析冲突，尝试关闭：

• 打开命令面板（快捷键Ctrl+Shift+P）
• 输入Volar: Disable Take Over Mode并执行
• 重启VSCode后验证

3. 手动约束useFetch返回类型 #

绕过TypeScript自动递归解析，显式指定返回结构：

// 根据实际接口返回结构定义类型
type StylesResponse = Styles[];

const { data, error } = await useFetch('/api/portfolio_style', {
    method: 'get',
}) as {
    data: Ref<StylesResponse | null>;
    error: Ref<Error | null>;
};

4. 更新核心依赖包 #

更新Nuxt及关联依赖，修复潜在的类型定义bug：

npm update nuxt @nuxtjs/tailwindcss pinia @pinia/nuxt

5. 优化TypeScript编译配置 #

在tsconfig.json中添加以下配置，降低类型解析复杂度：

{
  "compilerOptions": {
    "skipLibCheck": true,
    "strict": false, // 若严格模式触发问题可临时关闭，后续逐步恢复
    "typeRoots": ["./node_modules/@types", "./types"]
  }
}

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