React嵌套组件无法接收父组件传递的泛型类型问题求助

问题概述 #

需要构建支持后端操作更新的表格组件，核心需求是将父组件的响应模型类型和**接口端点（endpoint）**传递给嵌套子组件，实现：父组件定义响应类型 → 子组件继承类型并发起请求 → 表格数据同步更新。但当前嵌套结构中，泛型类型无法正确传递到TableDataHandler等子组件。

结构示意 #

TableParent<ResT> -> TableChild -> ProviderForUpdates -> DataHandler<ResT>（需要该类型处理数据）

期望流程 #

父组件传递Response类型 → DataHandler子组件继承该类型并发起查询 → 表格数据同步更新

原代码问题分析 #

1. DataTable组件未定义带泛型的Props接口，导致泛型ResponseType无法约束组件参数
2. TableDataHandler中TableCore的类型使用错误（typeof tableData.data无有效类型关联）
3. 部分组件参数的类型声明缺失，导致泛型传递链条断裂

修正后的代码实现 #

import { useState } from "react";
import DataTable from "@components/dataTable";

// 定义基础类型
type CarTypes = {
  id: number;
  name: string;
  description: string;
};

interface ResponseType {
  id: number;
  carTypes: CarTypes[];
}

// 父组件
const CarTypeComponent = () => {
  const [idsSelected, setIdsSelected] = useState<number[]>([]);
  
  const handleRowClick = (id: number) => {
    // 实现行点击逻辑
  };

  return (
    <DataTable<ResponseType>
      endpoint="car_types"
      setIdsSelected={setIdsSelected}
      idsSelected={idsSelected}
      onRowClick={handleRowClick}
    />
  );
};

// 定义DataTable的泛型Props接口
interface DataTableProps<ResponseType> {
  endpoint: string;
  setIdsSelected: (ids: number[]) => void;
  idsSelected: number[];
  onRowClick: (id: number) => void;
  onSort?: (column: string, dir: "asc" | "desc" | "") => void;
}

// DataTable子组件（带泛型）
const DataTable = <ResponseType,>({
  setIdsSelected,
  idsSelected,
  onRowClick,
  endpoint,
  onSort = () => {},
}: DataTableProps<ResponseType>) => {
  return (
    <TableContentProvider>
      <TableDataHandler<ResponseType>
        setIdsSelected={setIdsSelected}
        idsSelected={idsSelected}
        onSort={onSort}
        onRowClick={onRowClick}
        endpoint={endpoint}
      />
    </TableContentProvider>
  );
};

// 定义TableDataHandler的泛型Props接口
interface TableDataHandlerProps<ResponseType> {
  endpoint: string;
  setIdsSelected: (ids: number[]) => void;
  idsSelected: number[];
  onSort: (column: string, dir: "asc" | "desc" | "") => void;
  onRowClick: (id: number) => void;
}

// TableDataHandler子组件（带泛型）
const TableDataHandler = <ResponseType,>({
  setIdsSelected,
  idsSelected,
  onSort,
  onRowClick,
  endpoint,
}: TableDataHandlerProps<ResponseType>) => {
  const { currentSortedColumn, queryString } = useTableContext();
  const { response, error, loading } = useAxios<ResponseType>({
    url: `${endpoint}s?${queryString}`,
    method: "GET",
  });

  // 明确传递响应中的数据列表类型给TableCore
  return (
    <>
      {response && <TableCore<ResponseType["carTypes"]> data={response.carTypes} />}
    </>
  );
};

关键修复点 #

1. 定义泛型Props接口：给DataTable和TableDataHandler分别创建带泛型的Props接口，确保泛型类型能沿着组件传递链条正确流转
2. 修正TableCore类型传递：明确将响应数据中的列表类型（如ResponseType["carTypes"]）传递给TableCore，避免无意义的类型引用
3. 补全缺失的状态定义：原父组件中idsSelected状态未定义，补充useState<number[]>([])
4. 简化冗余代码：移除不必要的注释占位符，保持代码结构清晰

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