Next.js 14.2.4生产构建类型检查报错：string无法赋值给Ref<SVGSVGElement>

问题本质 #

生产构建时的严格类型检查发现：你传入自定义Link组件的Icon是带forwardRef的SVG组件，它的ref类型仅支持Ref<SVGSVGElement>，但Link组件期望的Icon类型（ComponentType<SVGProps<SVGSVGElement>>）中的ref是LegacyRef<SVGSVGElement>（包含字符串类型ref），二者不兼容。开发模式下类型检查默认宽松，因此未触发报错。

解决方案 #

方案1：修正自定义Link组件的类型定义（推荐） #

如果Link是你自己编写的组件，调整其Props中Icon的类型，兼容带forwardRef的组件：

import type { ElementType, SVGProps } from 'react';

interface LinkProps {
  href: string;
  // 使用ElementType兼容普通函数组件和带forwardRef的组件
  Icon: ElementType<SVGProps<SVGSVGElement>>;
  // 其他属性...
}

const Link = ({ href, Icon, ...restProps }: LinkProps) => {
  // 组件原有实现...
};

方案2：传入Icon时添加类型断言（临时快速解决） #

若不想修改Link组件类型，可在传入Icon时手动断言类型：

import type { ComponentType, SVGProps } from 'react';

// 在map循环的Link组件中添加断言
<Link 
  key={id} 
  href={href} 
  Icon={Icon as ComponentType<SVGProps<SVGSVGElement>>} 
/>

方案3：更新React类型依赖 #

检查项目中@types/react和@types/react-dom的版本，确保与Next.js 14.2.4兼容（Next.js 14.2.x对应React 18.x），旧版本类型定义可能存在不匹配问题：

npm install @types/react@latest @types/react-dom@latest

方案4：临时放宽类型检查（不推荐） #

若需紧急构建，可在出错文件顶部添加忽略注释：

// @ts-ignore

或修改tsconfig.json将strict设为false，但这会降低整体类型安全性，仅建议作为临时方案。

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