React泛型Hook中Void类型函数的类型兼容问题求解

问题场景 #

你在React Context中定义了接收函数参数的方法，在泛型Hook中使用时触发类型错误，核心代码如下：

Context代码

// Context
export type A = { id: string }

const TestContext = React.createContext<{ test: (doStuff: (a: A) => void) => void }>({
  test: () => {},
});

const TestProvider = ({ children }: { children: React.ReactNode }) => {
  function test(doStuff: (a: A) => void) {
    // 内部逻辑
  }
  return <TestContext.Provider value={{test}}>{children}</TestContext.Provider>
}

泛型Hook代码

// Hook
export function useThing<T extends A>() {
  const { test } = useContext(TestContext)
  const [stuff, setStuff] = useState<T[]>()

  function doStuff(a: T) {
    setStuff([...stuff, a])
  }

  function doMoreStuff() {
    test(doStuff) // 此处触发类型错误
  }
}

错误原因 #

test方法要求传入的函数参数是(a: A) => void，但Hook中的doStuff是(a: T) => void（T是A的子类型）。由于函数参数是逆变的：(a: T) => void不能赋值给(a: A) => void——因为test内部可能传入任意A类型的实例，而doStuff只能处理更具体的T类型，类型不兼容。

另一种修改后的错误翻译 #

当你把doStuff的签名改为doStuff(a: Pick<T, 'id'>)时，原错误消失，但setStuff会触发新错误：

类型 'T | Pick<T, "id">' 无法赋值给类型 'T'。
'T | Pick<T, "id">' 可赋值给 'T' 的约束类型，但 'T' 可能被实例化为约束类型 'A' 的不同子类型。

这个错误的本质是：Pick<T, 'id'>只是T的子集（仅包含id属性），而state要求的是完整的T类型，子集无法直接赋值给完整类型。

解决方案 #

方案1：让Context的test方法支持泛型

修改Context的类型定义，让test方法接受泛型参数，这样就能适配Hook中的具体T类型：

export type A = { id: string }

// 重新定义Context类型，让test支持泛型
type TestContextType = {
  test: <T extends A>(doStuff: (a: T) => void) => void;
};

const TestContext = React.createContext<TestContextType>({
  test: () => {},
});

const TestProvider = ({ children }: { children: React.ReactNode }) => {
  // 让test方法也支持泛型
  function test<T extends A>(doStuff: (a: T) => void) {
    // 内部调用doStuff时，确保传入的是T类型的实例
    // 例如：const data: T = ...; doStuff(data);
  }
  return <TestContext.Provider value={{ test }}>{children}</TestContext.Provider>;
};

// Hook中无需修改，直接调用即可
export function useThing<T extends A>() {
  const { test } = useContext(TestContext)
  const [stuff, setStuff] = useState<T[]>([]) // 建议初始化空数组，避免undefined问题

  function doStuff(a: T) {
    setStuff(prev => [...prev, a])
  }

  function doMoreStuff() {
    test(doStuff) // 无类型错误
  }
}

方案2：在Hook中兼容参数类型并断言

如果无法修改Context的定义，可以放宽doStuff的参数类型为A，然后通过类型断言确保传入的是T类型（需保证业务逻辑中test传入的确实是T实例）：

export function useThing<T extends A>() {
  const { test } = useContext(TestContext)
  const [stuff, setStuff] = useState<T[]>([])

  function doStuff(a: A) {
    // 断言a为T类型，需确保test内部传入的是符合T的实例
    setStuff(prev => [...prev, a as T])
  }

  function doMoreStuff() {
    test(doStuff) // 无类型错误
  }
}

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