React组件Wrapper透传Props问题：实现TypeScript类型支持

问题分析 #

当前的UserWrapper无法透传被包裹组件的额外必填Props，且缺乏对应TypeScript类型提示，核心问题在于：

1. 泛型约束与Props传递逻辑不匹配，未将剩余Props传递给目标组件
2. 类型交叉方式不够直观，导致TypeScript无法正确推断必填属性

解决方案代码 #

调整泛型约束、Props定义和传递逻辑后的UserWrapper组件：

"use client";
import { useGetMyself } from "@/client/api/user/queries/useGetMyself";
import { User } from "@/client/graphql/hooks";
import React from "react";
import { GenericFetchProblemDialog } from "../custom/dialog/GenericFetchProblemDialog";
import { env } from "@/env";

// 泛型C代表被包裹组件的完整Props，强制要求包含user字段
interface UserWrapperProps<C extends { user: User }> {
  component: React.FC<C>;
  loadingComponent: React.FC;
  showErrorDialog?: boolean;
} & Omit<C, "user">;

const UserWrapper = <C extends { user: User }>({
  component: MainComponent,
  loadingComponent: LoadingComponent,
  showErrorDialog,
  ...restProps
}: UserWrapperProps<C>) => {
  const { user, loading, notification, refetch } = useGetMyself();

  if (loading) {
    return <LoadingComponent />;
  }

  if (user === null || notification) {
    return (
      <>
        <LoadingComponent />
        {showErrorDialog && (
          <GenericFetchProblemDialog
            defaultOpen={true}
            open={true}
            retry={() => refetch()}
          />
        )}
      </>
    );
  }

  // 同时传递user和透传的剩余Props给目标组件
  return <MainComponent user={user} {...restProps} />;
};

export { UserWrapper };

关键修改点 #

• 泛型约束优化：用C extends { user: User }作为泛型约束，直接明确被包裹组件必须接收user属性，其他属性可自由扩展，逻辑更清晰。
• Props类型合并：UserWrapperProps与Omit<C, "user">交叉，让TypeScript自动识别被包裹组件除user外的所有必填/可选Props，并给出类型提示。
• 完整Props传递：渲染目标组件时，将user和剩余的restProps一起传入，实现所有Props的透传。

使用示例（含类型提示） #

假设NavigationStrip需要额外必填Propstheme: string，调用时TypeScript会自动提示必须传入该属性：

<UserWrapper
  loadingComponent={NavigationStripSkeleton}
  component={NavigationStrip}
  showErrorDialog
  theme="dark" // TypeScript自动提示该必填属性
/>

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