NextJS中SVGR+Webpack+TypeScript配置后类型提示失效求助

以下是几个可行的排查和解决步骤：

1. 完善类型声明，区分两种导入场景 #

你当前的类型声明只覆盖了作为React组件导入的SVG，但Webpack配置同时支持*.svg（组件）和*.svg?url（文件URL）两种导入方式，TS可能因场景混淆导致类型识别异常。更新declarations.d.ts内容：

// 作为React组件导入的SVG（不带?url后缀）
declare module '*.svg' {
  import React from 'react';
  const SVG: React.FC<React.SVGProps<SVGSVGElement>>;
  export default SVG;
}

// 作为文件URL导入的SVG（带?url后缀）
declare module '*.svg?url' {
  const content: string;
  export default content;
}

2. 确认tsconfig.json的include配置正确 #

确保declarations.d.ts被正确包含在TS编译范围内，示例配置：

{
  "include": [
    "declarations.d.ts",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

注意检查路径准确性：如果声明文件放在src目录下，需写成src/declarations.d.ts或用src/**/*.d.ts；同时确认exclude数组未意外排除该文件。

3. 重启TypeScript语言服务 #

VSCode的TS服务可能缓存旧类型信息，按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入并执行TypeScript: Restart TS Server，之后重新检查类型提示。

4. 调整SVGR配置选项（可选） #

尝试简化@svgr/webpack配置，暂时移除ext: 'tsx'选项——Next.js处理SVGR时通常无需手动指定输出扩展名：

use: [
  {
    loader: '@svgr/webpack',
    options: {
      typescript: true,
      // 移除ext: 'tsx'
    },
  },
]

5. 验证路径别名和文件存在性 #

确认导入的SVG文件路径拼写正确，且路径别名@在tsconfig.json中配置无误：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

同时检查目标SVG文件确实存在于指定路径下。

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