React TypeScript组件报错：Element|undefined无法赋值给ReactElement|null

我之前只用过JSX，刚上手TypeScript，写components/UI/Icon组件时遇到了类型错误，相关代码和报错信息如下：

相关代码 #

types.ts #

export interface IIcon {
  iconName: string;
  iconSize: string;
  iconFill: string;
}

index.tsx #

import React, { FC } from 'react';
import { IIcon } from './types';

export const Icon: FC<IIcon> = ({ iconName, iconSize, iconFill }) => {
  switch (iconName) {
    case 'logo':
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 64 64"
          enable-background="new 0 0 64 64"
          width={iconSize}
          height={iconSize}
        >
          <path
            d="m32 2c-16.568 0-30 13.432-30 30s13.432 30 30 30 30-13.432 30-30-13.432-30-30-30m6.016 44.508l-8.939-12.666-2.922 2.961v9.705h-5.963v-29.016h5.963v11.955l11.211-11.955h7.836l-11.909 11.934 12.518 17.082h-7.795"
            fill={iconFill}
          />
          <path
            xmlns="http://www.w3.org/2000/svg"
            d="m32 2c-16.568 0-30 13.432-30 30s13.432 30 30 30 30-13.432 30-30-13.432-30-30-30m6.016 44.508l-8.939-12.666-2.922 2.961v9.705h-5.963v-29.016h5.963v11.955l11.211-11.955h7.836l-11.909 11.934 12.518 17.082h-7.795"
            fill={iconFill}
          />
        </svg>
      );
    default:
      break;
  }
};

报错信息 #

Type '({ iconName, iconSize, iconFill }: IIcon) => Element | undefined' is not assignable to type 'FC<IIcon>'.
  Type 'Element | undefined' is not assignable to type 'ReactElement<any, any> | null'.
    Type 'undefined' is not assignable to type 'ReactElement<any, any> | null'.ts(2322)

解决方法 #

问题根源 #

TypeScript中FC（函数组件）类型强制要求组件返回值必须是ReactElement<any, any> | null，但当前代码在switch的default分支执行break后没有返回值，会隐式返回undefined，违反了类型约束。

方案1：默认分支返回null #

React允许组件返回null表示不渲染内容，直接修改default分支：

export const Icon: FC<IIcon> = ({ iconName, iconSize, iconFill }) => {
  switch (iconName) {
    case 'logo':
      return (
        // 原svg代码
      );
    default:
      return null; // 替换break为return null
  }
};

方案2：限制iconName的可选值（更严谨） #

既然目前只有'logo'一个有效图标名，不如把接口里的iconName定义为字面量类型，从根源避免无效值传入：

1. 更新types.ts：

export type IconName = 'logo'; // 后续加新图标直接扩展，比如'logo' | 'user'
export interface IIcon {
  iconName: IconName;
  iconSize: string;
  iconFill: string;
}

2. 此时组件不需要default分支，TypeScript会自动检查所有可能的IconName值都被覆盖，不会出现返回undefined的情况：

export const Icon: FC<IIcon> = ({ iconName, iconSize, iconFill }) => {
  switch (iconName) {
    case 'logo':
      return (
        // 原svg代码
      );
    // 无需default分支，TS会验证所有case已覆盖
  }
};

方案3：开发阶段抛出错误 #

如果希望传入无效图标名时立刻发现问题，可以在default分支抛出错误：

export const Icon: FC<IIcon> = ({ iconName, iconSize, iconFill }) => {
  switch (iconName) {
    case 'logo':
      return (
        // 原svg代码
      );
    default:
      throw new Error(`不支持的图标名称：${iconName}`);
  }
};

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