如何在React createContext中传递TypeScript泛型参数？

你碰到的这个TS2304错误其实很好解决，核心问题就是代码里的TData泛型参数没被正确声明——TypeScript压根不知道这个TData到底指的是什么类型。我给你两种解决方案，你可以根据需求选：

方案一：快速修正（基础版） #

如果你只是想先让代码通过编译，用这个写法就行，只需要给TData加上泛型声明和默认类型：

import { createContext } from "react" 
import { RowData, Table } from "@tanstack/react-table"  

// 给TData声明为泛型参数，同时指定默认类型为RowData
export const TableContext = createContext<Table<TData extends RowData = RowData>>(undefined as never)

这样TypeScript就能识别TData了，它会默认用RowData作为基础类型，你后续也能给Context传入更具体的Table实例。

方案二：泛型化Context（灵活版） #

要是你需要这个Context能适配不同的行数据类型，后续扩展更方便，那推荐用这种结合自定义Hook的写法，既能保证类型安全，又足够灵活：

1. 先定义Context的泛型类型并创建Context：

import { createContext, useContext } from "react";
import { RowData, Table } from "@tanstack/react-table";

// 定义Context支持的泛型类型，默认用RowData兜底
export type TableContextType<TData extends RowData = RowData> = Table<TData> | undefined;

// 创建Context，默认值设为undefined
export const TableContext = createContext<TableContextType>(undefined);

2. 写一个泛型自定义Hook，方便子组件安全使用Context：

export function useTableContext<TData extends RowData>(): Table<TData> {
  const context = useContext(TableContext) as TableContextType<TData>;
  
  // 可选：加个运行时检查，避免在Provider外面误用Hook导致报错
  if (!context) {
    throw new Error("useTableContext 必须在 TableContext.Provider 内部使用哦");
  }
  
  return context;
}

3. 实际使用的时候，父组件传入具体的Table实例，子组件用Hook指定类型：

// 父组件示例，假设MyRowData是你自己定义的行数据类型
const myTable = useTable({ columns, data: myData as MyRowData[] });

<TableContext.Provider value={myTable}>
  <MyTableSubComponent />
</TableContext.Provider>

// 子组件示例
import { useTableContext } from "./path-to-your-context-file";

function MyTableSubComponent() {
  // 指定具体的行数据类型，就能拿到完全类型安全的Table实例
  const table = useTableContext<MyRowData>();
  
  // 这里table的类型是Table<MyRowData>，TypeScript会给你完整的类型提示
  return <>{/* 你的表格渲染逻辑 */}</>;
}

这种写法的好处是，不管后续你的行数据类型怎么变，这个Context都能适配，而且全程有类型保障，不用手动写一堆类型断言。

内容来源于stack exchange