TypeScript React两父组件向子组件传不同props的类型报错解决

问题说明 #

公共子组件Items被两个父组件复用：

• 两个父组件均会向子组件传递data属性
• 仅父组件Home会传递分页相关的numPages、setNumPages属性
• 父组件GenresPage不会传递上述两个分页属性
  直接将两个分页属性标记为可选时，TypeScript抛出类型错误，提示React.Dispatch<React.SetStateAction<number>>类型不能为undefined；临时用any绕过检查不符合类型安全规范。

报错核心原因 #

当你把接口属性标记为可选时，TypeScript会自动给该属性的类型联合上undefined。如果子组件内部直接读取、调用这两个可选属性，却没有做对应的空值校验，TS的严格空值检查机制就会抛出错误，本质是类型安全的提示，不是可选属性的写法本身有问题。

合规解决方案 #

方案1：可选属性 + 子组件内空值收窄（适配绝大多数场景） #

直接将两个分页属性标记为可选，在子组件所有用到这两个属性的位置先做存在性判断，TS会自动收窄类型，不会再报类型错误，同时保留完整的类型检查能力：

interface DataProps {
  data: movieApi | null;
  // 标记为可选属性
  numPages?: number;
  setNumPages?: React.Dispatch<React.SetStateAction<number>>;
}

const Items = ({ data, numPages, setNumPages }: DataProps) => {
  // 调用setNumPages前先做存在判断
  const handlePageChange = (page: number) => {
    if (setNumPages) {
      // 此分支内TS会自动识别setNumPages为非空的dispatch类型，调用无报错
      setNumPages(page);
    }
  };

  return (
    <div>
      {/* 列表渲染逻辑 */}
      {/* 仅当两个分页属性都存在时，渲染分页模块 */}
      {numPages !== undefined && setNumPages ? (
        <Pagination total={numPages} onChange={handlePageChange} />
      ) : null}
    </div>
  );
};

注意：不要为了省事直接给可选属性加非空断言!强制跳过检查，若父组件未传对应属性，运行时会直接抛出JS错误，风险和使用any一致。

方案2：联合类型约束传参（类型严谨度最高） #

如果需要从类型层面强制约束规则：两个分页属性要么同时传递，要么都不传递，不允许只传其中一个，可以用联合类型定义Props，从根源避免传参错误：

// 所有场景都有的公共属性
interface BaseProps {
  data: movieApi | null;
}
// Home组件传参场景：必须传完整分页属性
interface WithPaginationProps extends BaseProps {
  numPages: number;
  setNumPages: React.Dispatch<React.SetStateAction<number>>;
}
// GenresPage传参场景：不允许传分页属性
interface WithoutPaginationProps extends BaseProps {
  numPages?: never;
  setNumPages?: never;
}
// 合并为最终子组件Props类型
type DataProps = WithPaginationProps | WithoutPaginationProps;

const Items = (props: DataProps) => {
  // 通过in操作符判断当前是哪种传参场景，收窄类型
  if ('setNumPages' in props) {
    // 此分支内TS自动识别为WithPaginationProps类型，属性都存在可直接使用
    const { data, numPages, setNumPages } = props;
    // 带分页的渲染逻辑
  } else {
    // 此分支内TS自动识别为WithoutPaginationProps类型，无分页属性
    const { data } = props;
    // 不带分页的渲染逻辑
  }
};

两种方案都完全符合TypeScript类型安全规范，不需要使用any绕过检查，可以根据项目的严谨度要求选择。

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