TypeScript报错：属性‘showButton’不存在于‘PropsWithChildren<Props>’类型，如何解决？

错误核心原因 #

Props是联合类型（PropsWithoutButton | PropsWithButton）：

• 当组件接收PropsWithoutButton类型的参数时，showButton和onButtonPress这两个属性根本不存在
• TypeScript的类型检查会严格确保你访问的属性在所有可能的类型分支中都存在，直接解构并访问这两个属性会触发类型错误

解决方案 #

方案1：用类型守卫缩小类型范围 #

在组件内部通过类型判断，让TypeScript明确当前props的具体类型，之后再访问对应属性：

// 自定义类型守卫函数（更严谨的写法）
function isPropsWithButton(props: Props): props is PropsWithButton {
  return 'showButton' in props;
}

const MyComponent: React.FC<Props> = (props) => {
  if (isPropsWithButton(props)) {
    // 此处TypeScript自动推断props为PropsWithButton类型
    return (
      <div>
        <p>{props.prop1}</p>
        <button onClick={props.onButtonPress}>点击按钮</button>
      </div>
    );
  }
  // 此处props自动推断为PropsWithoutButton类型
  return <p>{props.prop1}</p>;
};

也可以用简化的条件判断实现类型守卫：

const MyComponent: React.FC<Props> = ({ prop1, showButton, onButtonPress }) => {
  if (showButton !== undefined) {
    return (
      <div>
        <p>{prop1}</p>
        <button onClick={onButtonPress}>点击按钮</button>
      </div>
    );
  }
  return <p>{prop1}</p>;
};

方案2：调整类型定义，将属性设为可选 #

如果showButton和onButtonPress本身就是可选存在的，可以直接合并类型，避免联合类型带来的判断成本：

type Props = {
  prop1: any;
  showButton?: boolean;
  onButtonPress?: () => void;
};

const MyComponent: React.FC<Props> = ({ prop1, showButton, onButtonPress }) => {
  return (
    <div>
      <p>{prop1}</p>
      {showButton && onButtonPress && <button onClick={onButtonPress}>点击按钮</button>}
    </div>
  );
};

方案3：用可选链处理属性访问 #

如果不想修改类型定义，也可以通过可选链（?.）规避类型错误，同时处理属性不存在的场景：

const MyComponent: React.FC<Props> = ({ prop1, showButton, onButtonPress }) => {
  return (
    <div>
      <p>{prop1}</p>
      {showButton && onButtonPress && <button onClick={onButtonPress}>点击按钮</button>}
    </div>
  );
};

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