Next.js 12.3.0+TypeScript路径别名下如何正确使用动态导入？

问题原因 #

你的HomeIcon是命名导出（export const HomeIcon），但Next.js的dynamic函数默认会尝试导入模块的default导出，导致找不到对应组件，同时TypeScript无法正确推断组件类型，触发类型错误。

解决方案 #

1. 修正动态导入写法，指定命名导出 #

调整动态导入逻辑，显式返回命名导出的HomeIcon组件：

import dynamic from 'next/dynamic';

const DynamicHomeIcon = dynamic(() => 
  import('@/components/Icons/HomeIcon').then((mod) => mod.HomeIcon)
);

2. 手动指定组件类型（可选但推荐） #

为了让TypeScript提供完整的类型提示，可手动声明组件类型：

import dynamic from 'next/dynamic';
import type { FunctionComponent, IconProps } from 'react';

// 复用原组件的类型
type HomeIconComponent = FunctionComponent<IconProps>;

const DynamicHomeIcon = dynamic(() => 
  import('@/components/Icons/HomeIcon').then((mod) => mod.HomeIcon)
) as HomeIconComponent;

3. 验证模块别名配置 #

确保tsconfig.json中的路径别名配置正确（以源码在src目录为例）：

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

完成以上调整后，即可正常使用<DynamicHomeIcon />，且TypeScript错误会被修复。

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