TypeScript报错：Type 'undefined'无法分配给组件属性类型的解决方案

问题场景 #

从CMS获取数据并传递给React组件时触发类型错误：

const activeBreakdownContent = cmsData?.activeBreakdownContent;
data: [
  <HomeHeader
    dynamicHeroItems={filteredCarouselItems}
    activeBreakdownContent={activeBreakdownContent}
  />,
]

报错信息 #

Type 'undefined' is not assignable to type '{ activeBreakdownDescription?: string | undefined; activeBreakdownHeader?: string | undefined; activeBreakdownIcon?: any; activeBreakdownImage?: any; }'

组件与类型定义 #

HomeHeader组件的props定义：

interface HomeHeaderProps {
  dynamicHeroItems: MobileApiContract.Models.CMSEnrichmentModels.DynamicHeroCarouselItem[];
  activeBreakdownContent: MobileApiContract.Models.CMSEnrichmentModels.Homepage['activeBreakdownContent'];
}

const HomeHeader = ({
  activeBreakdownContent: {
    activeBreakdownHeader,
    activeBreakdownDescription,
    activeBreakdownIcon,
    activeBreakdownImage,
  },
  dynamicHeroItems,
}: HomeHeaderProps) => {
  if (isActiveBreakdown && EnableHomepageETA) {
    return (
      <RescueMeHero
        title={activeBreakdownHeader || 'backup tutle'}
        body={activeBreakdownDescription || 'backup tutle'}
        image={activeBreakdownImage}
        icon={activeBreakdownIcon}
      />
    );
  }
  // ...其他逻辑
};

MobileApiContract中相关类型：

activeBreakdownContent: {
  activeBreakdownDescription?: string;
  activeBreakdownHeader?: string;
  activeBreakdownIcon?: BaseImageModel;
  activeBreakdownImage?: BaseImageModel;
};

报错原因 #

cmsData?.activeBreakdownContent使用可选链操作符，当cmsData不存在时会返回undefined，但HomeHeader的activeBreakdownContentprops被定义为必填对象类型，不接受undefined，因此触发类型检查错误。

解决方案 #

方案1：将activeBreakdownContent设为可选props #

修改组件props定义，允许activeBreakdownContent为undefined，同时在解构时提供默认空对象避免报错：

interface HomeHeaderProps {
  dynamicHeroItems: MobileApiContract.Models.CMSEnrichmentModels.DynamicHeroCarouselItem[];
  // 添加?标记为可选属性
  activeBreakdownContent?: MobileApiContract.Models.CMSEnrichmentModels.Homepage['activeBreakdownContent'];
}

const HomeHeader = ({
  // 给activeBreakdownContent设置默认空对象
  activeBreakdownContent = {},
  dynamicHeroItems,
}: HomeHeaderProps) => {
  const {
    activeBreakdownHeader,
    activeBreakdownDescription,
    activeBreakdownIcon,
    activeBreakdownImage,
  } = activeBreakdownContent;

  if (isActiveBreakdown && EnableHomepageETA) {
    return (
      <RescueMeHero
        title={activeBreakdownHeader || 'backup tutle'}
        body={activeBreakdownDescription || 'backup tutle'}
        image={activeBreakdownImage}
        icon={activeBreakdownIcon}
      />
    );
  }
  // ...其他逻辑
};

方案2：传递数据时确保值不为undefined #

在传递给组件前，给activeBreakdownContent设置默认空对象，避免传递undefined：

// 使用||兜底空对象，确保不会传递undefined
const activeBreakdownContent = cmsData?.activeBreakdownContent || {};
data: [
  <HomeHeader
    dynamicHeroItems={filteredCarouselItems}
    activeBreakdownContent={activeBreakdownContent}
  />,
]

方案3：组件内部先判断值是否存在 #

如果不想修改props的必填性，可在组件内部先检查activeBreakdownContent是否存在，再进行解构：

const HomeHeader = ({
  activeBreakdownContent,
  dynamicHeroItems,
}: HomeHeaderProps) => {
  if (isActiveBreakdown && EnableHomepageETA) {
    // 用|| {}兜底，避免解构undefined报错
    const {
      activeBreakdownHeader,
      activeBreakdownDescription,
      activeBreakdownIcon,
      activeBreakdownImage,
    } = activeBreakdownContent || {};
    return (
      <RescueMeHero
        title={activeBreakdownHeader || 'backup tutle'}
        body={activeBreakdownDescription || 'backup tutle'}
        image={activeBreakdownImage}
        icon={activeBreakdownIcon}
      />
    );
  }
  // ...其他逻辑
};

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