NextJS子组件自定义props丢失问题求助

你的问题核心是：CoverImage组件接收的coverImage属性初始有效，但后续变为undefined，导致无法用它的宽高替换硬编码值。主要原因及解决方法如下：

1. 部分调用CoverImage的场景未传递coverImage属性 #

你仅在HeroPost组件中给CoverImage传递了coverImage={heroPost.coverImage}，但页面中的MoreStories组件（渲染其他文章）大概率也调用了CoverImage，却未传递该属性。初始渲染HeroPost时coverImage存在，后续渲染其他文章的CoverImage实例时，因未传属性就会变为undefined，控制台便会输出该情况。

解决方法： #

检查所有调用CoverImage的组件（比如PostCard），确保统一传递coverImage属性：

// 示例：PostCard组件中调用CoverImage的正确写法
<CoverImage 
  title={post.title} 
  src={post.coverImage.url} 
  slug={post.slug} 
  coverImage={post.coverImage} // 补充传递该属性
/>

2. 类型定义未做兜底，组件未处理coverImage缺失的情况 #

你将CoverImage的coverImage属性定义为必填项，但如果存在文章数据缺失coverImage、或调用时漏传的情况，就会触发undefined报错。

解决方法： #

将coverImage设为可选属性，并在使用时做兜底处理，同时替换硬编码的宽高值：

// cover-image.tsx 修改后的代码
type Props = {
    title: string
    src: string
    slug?: string
    coverImage?: { // 改为可选属性
        url: string
        width: number
        height: number
    }
}

const CoverImage = ({ title, src, slug, coverImage }: Props) => {
    // 用可选链+默认值兜底，避免undefined报错
    const imageWidth = coverImage?.width || 1495;
    const imageHeight = coverImage?.height || 841;

    const image = (
        <>
            <Image src={src} width={imageWidth} height={imageHeight} />
        </>
    )
    return (
        <div className="sm:mx-0">
            {slug ? (
                <Link as={`/posts/${slug}`} href="/posts/[slug]">
                    <a aria-label={title}>{image}</a>
                </Link>
            ) : (
                image
            )}
        </div>
    )
}

export default CoverImage

额外检查点 #

• 确认getPosts()返回的所有文章数据中，coverImage都包含width和height字段，避免数据本身缺失导致的undefined。
• 检查你的Post类型定义，确保coverImage的结构正确（包含url/width/height），避免TypeScript类型推断出错。

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