Nuxt3配置ESLint与VSCode后TypeScript报错问题求助

问题场景 #

创建Nuxt3项目并配置ESLint后，在<script setup lang="ts">中使用useFetch调用接口时，ESLint提示**“No overload matches this call”**错误，但项目实际运行正常，浏览器无报错；移除lang="ts"后错误消失。

示例代码：

<script setup lang="ts">
const { params } = useRoute()
const { data } = await useFetch('/api/fetchCardById', {
  query: {
    id: params.id
  }
})
</script>

解决步骤 #

1. 确保Nuxt类型定义正确加载 #

检查项目根目录的tsconfig.json，确认已继承Nuxt自动生成的类型配置：

{
  "extends": "./.nuxt/tsconfig.json"
}

若文件不存在，运行npx nuxi prepare命令自动生成。

2. 修复useFetch的类型不匹配问题 #

报错核心原因是params.id的类型为string | string[]，与useFetch的query参数类型不兼容，可通过以下两种方式解决：

方法一：类型断言

直接将params.id断言为string类型：

<script setup lang="ts">
const { params } = useRoute()
const { data } = await useFetch('/api/fetchCardById', {
  query: {
    id: params.id as string
  }
})
</script>

方法二：明确Route参数类型

通过Nuxt的类型助手指定路由参数的具体类型：

<script setup lang="ts">
import type { RouteParams } from 'nuxt/dist/app/composables/router'

const { params } = useRoute<{ params: RouteParams & { id: string } }>()
const { data } = await useFetch('/api/fetchCardById', {
  query: {
    id: params.id
  }
})
</script>

3. 调整ESLint配置避免冲突 #

修改eslint.config.mjs，确保自定义规则仅覆盖格式类规则，不干扰TypeScript类型检查：

import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt({
  rules: {
    indent: ['error', 2],
    quotes: ['error', 'single'],
    semi: ['error', 'never'],
    // 若使用类型断言，可临时关闭不必要的断言检查规则
    '@typescript-eslint/no-unnecessary-type-assertion': 'off'
  }
})

4. 配置VSCode使用项目本地TypeScript版本 #

在.vscode/settings.json中添加以下配置，避免VSCode全局TS版本与项目版本冲突：

{
  "eslint.experimental.useFlatConfig": true,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.tsdk": "node_modules/typescript/lib"
}

5. 重新生成Nuxt类型文件 #

运行以下命令更新.nuxt目录下的类型定义：

npx nuxi prepare

内容的提问来源于stack exchange，提问作者nuxt3-learning