TypeScript告诉我：

Type '{ banner: { id: number; bannerImageUrl: string; } | undefined; }' is not assignable to type 'IntrinsicAttributes & Banner'.
  Property 'banner' does not exist on type 'IntrinsicAttributes & Banner'.ts(2322)

我在使用Next。js，这里是使用的文件：

index.tsx

import data from '../../json/data.json'
import Banner from '../components/home/banner'

export default function Home() {
  const home = data?.data[0].pageContent[0].home[0]
  const banner = home?.banner
  
  return (
    <Banner banner={banner}/>
  )
}

banner.tsx（../components/home/banner）

import Image from 'next/image'

interface Banner {
  banner: {
    id: number,
    imageUrl: string
  }
}

export default function Banner({ banner } : Banner) {
  return (
    <Image 
      className="hero__banner-image"
      src={banner.imageUrl}
      alt="Banner Image"
      fill
    />
  )
}

现在，页面工作正常（所有内容加载时都没有错误），但我在index.tsx文件中不断收到上面的错误。我尝试添加| undefined，例如：

interface {
  banner: {
    id: number,
    imageUrl: string
  } | undefined
}

错误被修复了，但是图像的src部分告诉我它不能有“undefined”，这是有意义的，因为我添加了接口可以是“undefined”。
data?.data[0].pageContent[0].home[0]的JSON格式是：

{
  "home": [
    {
      "id": 0,
      "banner": {
        "id": 0,
        "imageUrl": "/../public/images/bannerImage.jpg"
      }
    }
  ]
}