TypeScript ts(2339)报错：addTask属性不存在于TaskContextType|null类型

你创建Context时给泛型传入了联合类型TaskContextType | null，且初始值设为null：

const TasksCtx = createContext<TaskContextType | null>(null);

这直接导致useTasks()的返回值类型是TaskContextType | null。TypeScript做类型检查时，会遍历联合类型的所有成员确认属性是否存在：null类型上没有addTask属性，所以直接解构就会抛出ts(2339)错误，和你在TaskContextType里有没有定义addTask字段没有关系。

• 最推荐：在自定义Hook内做运行时非空校验，自动收窄TS类型
  修改useTasks的实现，在Context为空时直接抛出明确的错误，TS会自动把返回值类型收窄为TaskContextType，既解决类型报错，还能避免开发者在Context Provider包裹范围外调用Hook的隐性bug：

  export const useTasks = () => {
    const context = useContext(TasksCtx);
    if (!context) {
      throw new Error("useTasks 只能在 TasksCtx.Provider 包裹的组件内使用");
    }
    return context;
  };
  

  改完之后原有const { addTask } = useTasks();的写法不用做任何修改，不会再报类型错误。

• 快速修复：使用非空断言
  如果你可以百分百确认调用useTasks的组件一定在Provider作用域内，可以直接在Hook调用后加非空断言!，告诉TS跳过空值检查：

  const { addTask } = useTasks()!;
  

  这种写法没有运行时校验逻辑，一旦组件脱离Provider包裹会直接触发运行时错误，不建议在中大型项目使用。

• 无校验方案：给Context传入符合类型要求的默认值，移除null类型
  创建Context时去掉泛型里的| null，传入和TaskContextType结构匹配的默认初始值：

  const TasksCtx = createContext<TaskContextType>({
    tasks: [],
    addTask: async () => {} // 空函数作为默认实现
  });
  

  这种写法也能解决类型报错，但默认的空addTask没有实际业务逻辑，会掩盖Provider漏包裹的问题，排查问题成本较高。

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