解决Next.js中TypeScript接口使用的undefined类型错误

方案一：父组件确保props存在后再渲染组件 #

在index.tsx中先判断banner是否存在，只有当它有效时才渲染Banner组件，保证传递给组件的banner符合非undefined的类型要求：

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
  
  // 若banner不存在，返回加载提示或空内容
  if (!banner) {
    return <div>加载中...</div>;
  }
  
  return (
    <Banner banner={banner}/>
  )
}

banner.tsx保持原接口不变（无需添加| undefined），建议修改接口名避免与组件重名：

import Image from 'next/image'

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

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

方案二：组件内部处理undefined情况 #

如果需要允许banner为undefined传入组件，就在组件接口中声明可选类型，并在组件内部做空值判断，避免访问undefined属性：

import Image from 'next/image'

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

export default function Banner({ banner } : BannerProps) {
  // 若banner不存在，返回空或默认图片
  if (!banner) {
    return null;
    // 也可替换为默认图片：
    // return <Image src="/default-banner.jpg" alt="默认横幅" fill />;
  }
  
  return (
    <Image 
      className="hero__banner-image"
      src={banner.imageUrl}
      alt="Banner Image"
      fill
    />
  )
}

此时index.tsx无需修改，传递可能为undefined的banner不会再触发类型错误。

方案三：非空断言（谨慎使用） #

如果你能100%确认data中的banner必然存在，可以用非空断言（!）强制告诉TypeScript该值不会是undefined，但这种方式存在运行时风险——若数据结构变化或缺失，会直接报错：

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

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