在TypeScript中为React Context的SetState函数设null默认值的方法

针对你遇到的问题，这里有几种可行的解决方案：

方案1：修改类型定义，允许Setter为null #

直接在HotelSearch接口里把setter的类型改为允许null，这样初始值设null就符合TypeScript要求了。不过子组件使用时要先判断函数是否存在，避免调用null导致报错。

修改后的类型定义：

export interface HotelSearch {
  checkInDate: Date | null;
  checkOutDate: Date | null;
  setCheckInDate: React.Dispatch<React.SetStateAction<Date | null>> | null;
  setCheckOutDate: React.Dispatch<React.SetStateAction<Date | null>> | null;
}

子组件中使用示例：

const { setCheckInDate } = useContext(HotelSearchContext);

// 使用前先判断
if (setCheckInDate) {
  setCheckInDate(new Date());
}

方案2：提供空函数作为默认值 #

既然Dispatch是函数类型，我们可以给setter设置一个空的默认函数，既符合类型要求，又不会在没有Provider的情况下触发运行时错误（只是调用了没效果）。

修改后的Context创建代码：

export const HotelSearchContext = createContext<HotelSearch>({
  checkInDate: null,
  checkOutDate: null,
  // 空函数匹配Dispatch类型
  setCheckInDate: () => {},
  setCheckOutDate: () => {},
});

这种方式不需要修改原类型定义，子组件可以直接调用setter，无需额外判断，即使在Provider外调用也不会报错。

方案3：使用自定义Hook确保Context有值 #

如果你的应用中所有使用这个Context的组件都被Provider包裹，可以创建一个自定义Hook，强制确保Context有值，同时用类型断言跳过初始值的类型检查。

第一步，修改Context创建：

// 用类型断言跳过初始值的类型检查，因为我们确保Provider会提供有效值
export const HotelSearchContext = createContext<HotelSearch>({} as HotelSearch);

第二步，创建自定义Hook：

export function useHotelSearchContext() {
  const context = useContext(HotelSearchContext);
  if (!context) {
    throw new Error('useHotelSearchContext must be used within a HotelSearchContext.Provider');
  }
  return context;
}

之后子组件直接使用这个自定义Hook，而不是原生的useContext，这样既能保证类型安全，又能在误用的时候抛出明确错误，避免隐性问题。

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