React中仅传递已定义的props给Next.js的Image组件

针对你在MDX+Next.js自定义图片组件中遇到的「仅传递已定义props给Next.js Image组件」的问题，有两种简洁的解决方案：

方法一：批量过滤非undefined属性 #

通过对象遍历过滤掉所有值为undefined的属性，再传递给Next.js Image组件，适合需要处理大量props的场景：

import Image from 'next/image';

const CustomImage = (props) => {
  // 过滤出所有值不为undefined的属性
  const validProps = Object.fromEntries(
    Object.entries(props).filter(([_, value]) => value !== undefined)
  );

  return <Image {...validProps} />;
};

这种方式会自动忽略所有未定义的props，不会把undefined传递给Image组件，从根源避免类型不匹配错误。

方法二：针对特定props手动条件传递 #

如果只需要处理src、alt、width、height这几个特定props，可以用对象展开+条件判断的方式，精准控制每个props的传递：

import Image from 'next/image';

const CustomImage = ({ src, alt, width, height, ...restProps }) => {
  return (
    <Image
      // 仅当src已定义时传递
      {...(src !== undefined && { src })}
      // 仅当alt已定义时传递
      {...(alt !== undefined && { alt })}
      // 仅当width已定义时传递（注意：如果允许width为0，必须用!==undefined判断）
      {...(width !== undefined && { width })}
      // 仅当height已定义时传递
      {...(height !== undefined && { height })}
      // 传递其他剩余props
      {...restProps}
    />
  );
};

关于TypeScript类型适配 #

如果使用TypeScript，你可以通过类型断言让编译器信任过滤后的props：

import Image from 'next/image';
import type { ImgHTMLAttributes } from 'react';
import type { StaticImport } from 'next/dist/shared/lib/get-img-props';

type CustomImageProps = ImgHTMLAttributes<HTMLImageElement>;

const CustomImage = (props: CustomImageProps) => {
  const validProps = Object.fromEntries(
    Object.entries(props).filter(([_, value]) => value !== undefined)
  ) as Omit<CustomImageProps, 'src'> & {
    src?: string | StaticImport;
  };

  return <Image {...validProps} />;
};

为什么你之前的写法不适用 #

你之前给未定义的props赋值空字符串的方式，会把不符合要求的类型（比如空字符串传给需要number类型的width）传递给Image组件，反而引发新的类型错误，同时也违背了「未定义时不传递」的需求。

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