TypeScript报错：prevUrl属性缺失及类型不存在问题如何修复？

为啥会报错？ #

你写的代码里，虽然通过variant的条件判断已经确保只有在middle或last模式下才会访问prevUrl，但TypeScript没法通过剩余参数...props自动缩小类型范围——因为...props被推断成了三个联合类型的交集（也就是空对象{}），所以它不认props.prevUrl的存在，就抛出了错误。

怎么修复？ #

方案1：直接用完整props（推荐） #

别用...props剩余参数，直接使用传入的完整props对象。这样TypeScript能通过variant的条件判断自动窄化类型，确认在对应分支下prevUrl一定存在：

function NavigationButtons(props:
  | { variant: 'first'; nextUrl: string }
  | { variant: 'middle'; prevUrl: string; nextUrl: string }
  | { variant: 'last'; prevUrl: string; confirm: () => void }) {
  const { variant } = props;

  return (
    <nav
      className={`fixed bottom-0 left-0 right-0 flex bg-neutral-white p-4 ${
        variant === 'first' && 'justify-end'
      } lg:static lg:mt-auto`}
    >
      {(variant === 'middle' || variant === 'last') && (
        <Link href={props.prevUrl}>
          <button>Go Back</button>
        </Link>
      )}
      {(variant === 'first' || variant === 'middle') && (
        <button className='rounded bg-primary-marine-blue px-4 py-2 text-neutral-alabaster'>
          Next Step
        </button>
      )}
      {variant === 'last' && <button>Confirm</button>}
    </nav>
  );
}

要是想让代码更清晰，可以改成switch分支，每个分支里解构对应属性：

function NavigationButtons(props:
  | { variant: 'first'; nextUrl: string }
  | { variant: 'middle'; prevUrl: string; nextUrl: string }
  | { variant: 'last'; prevUrl: string; confirm: () => void }) {
  switch (props.variant) {
    case 'first':
      return (
        <nav className="fixed bottom-0 left-0 right-0 flex bg-neutral-white p-4 justify-end lg:static lg:mt-auto">
          <button className='rounded bg-primary-marine-blue px-4 py-2 text-neutral-alabaster'>
            Next Step
          </button>
        </nav>
      );
    case 'middle':
      const { prevUrl: middlePrev } = props;
      return (
        <nav className="fixed bottom-0 left-0 right-0 flex bg-neutral-white p-4 lg:static lg:mt-auto">
          <Link href={middlePrev}>
            <button>Go Back</button>
          </Link>
          <button className='rounded bg-primary-marine-blue px-4 py-2 text-neutral-alabaster'>
            Next Step
          </button>
        </nav>
      );
    case 'last':
      const { prevUrl: lastPrev, confirm } = props;
      return (
        <nav className="fixed bottom-0 left-0 right-0 flex bg-neutral-white p-4 lg:static lg:mt-auto">
          <Link href={lastPrev}>
            <button>Go Back</button>
          </Link>
          <button onClick={confirm}>Confirm</button>
        </nav>
      );
  }
}

方案2：类型断言（快速但不够严谨） #

如果不想大改代码结构，也可以在访问prevUrl时用类型断言告诉TypeScript这个属性此时肯定存在：

{(variant === 'middle' || variant === 'last') && (
  <Link href={props.prevUrl as string}>
    <button>Go Back</button>
  </Link>
)}

这种方式简单，但如果后续修改条件判断，可能会引入运行时错误，所以更推荐第一种方案。

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