我正在尝试重构一个组件以使用typescript。

import { useRef } from 'react'
import Image, { ImageProps } from 'next/image'

type BannerBlockProps = {
  image?: ImageProps[]
}

const BannerBlock = (props: BannerBlockProps) => {
  const imageRef = useRef<HTMLImageElement >(null)

  return (
  
        <div className='BannerBlock-imageWrapper' >
          <Image className="BannerBlock-image" src={image[0].src} alt={image[0].alt} width={image[0].width} height={image[0].height} ref={imageRef}/>
        </div>
  )
}

export default BannerBlock

然后，我在Image ref属性上获得以下typescript error：：

• （属性）引用：引用对象类型“{类名称：字符串;源代码：串|静态导入; alt：字符串|未定义;宽度：串|号码|未定义;高度：串|号码|未定义;参考：'不可赋值给类型'内部属性&|......还有四个......|“正在加载”〉& {...;属性“ref”在类型“IntrinsicAttributes，”“src”上不存在。|......还有四个......|“正在加载”〉& {*

这是因为在next/dist/client/image.d.ts中，ImageProps上省略了ref类型：

export declare type ImageProps = Omit<JSX.IntrinsicElements['img'], 'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading'> & {
    src: string | StaticImport;
    width?: number | string;
    height?: number | string;
    layout?: LayoutValue;
    loader?: ImageLoader;
    quality?: number | string;
    priority?: boolean;
    loading?: LoadingValue;
    lazyRoot?: React.RefObject<HTMLElement> | null;
    lazyBoundary?: string;
    placeholder?: PlaceholderValue;
    blurDataURL?: string;
    unoptimized?: boolean;
    objectFit?: ImgElementStyle['objectFit'];
    objectPosition?: ImgElementStyle['objectPosition'];
    onLoadingComplete?: OnLoadingComplete;
};

当我从省略的属性列表中删除| 'ref'时，错误消失了。为什么省略了这个属性？在图像组件上使用ref属性是不是不好？在图像组件上放置一个 Package 器div并在那里添加引用很容易修复，但我很好奇为什么这是不可能的，以及我这样做是否正确。