React+Redux+TypeScript：如何正确类型化mapStateToProps支持部分传参

核心问题是你混淆了容器组件接收的外部Props和UI组件依赖的完整Props的类型定义，导致TypeScript错误判断了容器组件的入参要求。以下是具体修正步骤：

1. 拆分Props类型 #

分别定义两种Props类型，明确区分调用者需要传入的参数，以及UI组件实际需要的完整参数：

// 容器组件仅接收调用者传入的参数
type OrderItemContainerProps = {
  contact: Contact | undefined;
};

// UI组件需要的完整参数（外部传入 + Redux派生）
type OrderItemComponentProps = OrderItemContainerProps & {
  isAuthenticated: boolean;
  orderItem: OrderItem;
};

2. 修正mapStateToProps的类型 #

mapStateToProps的第二个参数ownProps对应容器组件的入参类型，返回值仅包含从Redux状态派生的部分参数，而非完整的UI组件Props：

const OrderItemComponent: React.FC<OrderItemComponentProps> = ({
  contact,
  isAuthenticated,
  orderItem,
}) => {
  // 组件业务逻辑
  return <div>{/* ... */}</div>;
};

function mapStateToProps(
  state: RootState,
  ownProps: OrderItemContainerProps
): Omit<OrderItemComponentProps, keyof OrderItemContainerProps> {
  return {
    isAuthenticated: state.auth.isAuthenticated,
    orderItem: state.orderItem.orderItem,
  };
}

3. 优化connect的类型推断（可选） #

手动指定connect的泛型参数，让TypeScript更清晰地识别参数流转逻辑：

export const OrderItemContainer = connect<
  Omit<OrderItemComponentProps, keyof OrderItemContainerProps>, // Redux派生的Props
  {}, // mapDispatch返回的Props（此处无需，留空）
  OrderItemContainerProps, // 容器接收的外部Props
  RootState // Redux根状态类型
>(mapStateToProps)(OrderItemComponent);

替代方案：使用Redux Toolkit函数式写法（推荐） #

如果你的项目使用Redux Toolkit（React 18+环境更推荐），可以直接用useSelector替代connect，类型推断更直观，无需额外定义容器组件：

const OrderItemComponent: React.FC<OrderItemContainerProps> = ({ contact }) => {
  const isAuthenticated = useSelector((state: RootState) => state.auth.isAuthenticated);
  const orderItem = useSelector((state: RootState) => state.orderItem.orderItem);

  // 组件业务逻辑
  return <div>{/* ... */}</div>;
};

// 调用时直接传入contact即可
<OrderItemComponent contact={orderItem.sender} />

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