Next.js中IllustrationWrapper组件ImageProps覆盖src/alt的类型错误修复

问题根源是你的IllustrationProps继承了ImageProps，而src和alt在ImageProps中属于必填属性，但你希望通过illustrationName自动生成这两个值，不需要调用方传入。解决核心是从自定义Props中排除src和alt，并将它们的生成逻辑封装在组件内部。

步骤1：定义正确的组件Props类型 #

使用TypeScript的Omit工具类型，移除ImageProps中的src和alt，同时添加自定义的illustrationName属性：

import type { ImageProps } from 'next/image';

// 排除ImageProps中的src和alt，新增illustrationName必填项
type IllustrationWrapperProps = Omit<ImageProps, 'src' | 'alt'> & {
  illustrationName: string;
};

步骤2：实现组件内部的src和alt生成逻辑 #

在组件中根据illustrationName拼接图片路径和生成alt文本，再传递给Next.js的Image组件：

import Image from 'next/image';

const IllustrationWrapper = ({ illustrationName, ...restProps }: IllustrationWrapperProps) => {
  // 根据你的实际图片存储路径调整src生成规则
  const imageSrc = `/assets/illustrations/${illustrationName}.png`;
  // 自定义alt文本，可根据需求调整（比如从字典中匹配对应描述）
  const imageAlt = `${illustrationName.replace('-', ' ')} illustration`;

  return <Image src={imageSrc} alt={imageAlt} {...restProps} />;
};

export default IllustrationWrapper;

步骤3：在DesktopNav中正确使用组件 #

此时调用组件时，只需传入illustrationName和Image组件支持的其他属性（如width、height），不会再出现类型错误：

import IllustrationWrapper from '../components/IllustrationWrapper';

const DesktopNav = () => {
  return (
    <nav className="desktop-nav">
      <IllustrationWrapper
        illustrationName="nav-logo"
        width={50}
        height={50}
        priority
      />
      {/* 其他导航内容 */}
    </nav>
  );
};

额外说明 #

如果你的图片路径或alt文本生成逻辑更复杂（比如需要支持不同格式、多语言alt），可以在组件内部扩展逻辑，比如传入可选的altOverride属性来覆盖自动生成的文本，同时保持alt在Props中被排除：

type IllustrationWrapperProps = Omit<ImageProps, 'src' | 'alt'> & {
  illustrationName: string;
  altOverride?: string; // 可选的自定义alt
};

// 组件内部调整
const imageAlt = props.altOverride || `${props.illustrationName.replace('-', ' ')} illustration`;

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