React TypeScript中createContext默认值类型不匹配问题求助

你的TS报错核心原因是：UpdatePetTypeContext的默认函数返回React.MouseEvent类型，但实际传入Provider的togglePet函数返回void，两者类型不匹配。以下是修正方案：

步骤1：明确更新函数的类型定义 #

先定义更新函数的类型签名，确保后续Context和实际函数都遵循这个类型：

type UpdatePetTypeFn = (event: React.MouseEvent<HTMLElement>) => void;

步骤2：创建符合类型的Context #

用上面定义的类型创建Context，设置一个符合类型的默认值（空函数，避免未被Provider包裹时调用报错）：

const UpdatePetTypeContext = createContext<UpdatePetTypeFn>(() => {});

完整修正后的代码 #

// PetTypeProvider.tsx
import { useState, createContext, useContext } from 'react';

// 宠物类型Context，默认值与初始状态保持一致更合理
const PetTypeContext = createContext('Dogs');

// 定义更新函数的类型
type UpdatePetTypeFn = (event: React.MouseEvent<HTMLElement>) => void;

// 创建更新函数Context，默认值为符合类型的空函数
const UpdatePetTypeContext = createContext<UpdatePetTypeFn>(() => {});

export function usePetType() {
  return useContext(PetTypeContext)
}

export function useUpdatePetType() {
  return useContext(UpdatePetTypeContext)
}

interface PetTypeProviderProps {
  children: JSX.Element|JSX.Element[];
}

export const PetTypeProvider: React.FC<PetTypeProviderProps> = ({children}) => {
  const [petType, setPetType] = useState('Dogs');
  const togglePet = (event: React.MouseEvent<HTMLElement>) => setPetType(event.currentTarget.innerText);
  return (
    <PetTypeContext.Provider value={petType}>
      <UpdatePetTypeContext.Provider value={togglePet}>
        {children}
      </UpdatePetTypeContext.Provider>
    </PetTypeContext.Provider>
  );
};

这样修改后，TS编译器会认可类型匹配，同时默认的空函数也能避免组件未被PetTypeProvider包裹时，调用useUpdatePetType()返回undefined导致的潜在报错。

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