reactjs - 属性 'X' 在类型 'context | null' 上不存在。 ts(2339)

我无法弄明白这一点。即使我在类型 TasksContextType 中定义了函数的类型，TypeScript 为什么仍然显示这个错误...

错误：属性 'addTask' 在类型 'TaskContextType | null' 上不存在。 ts(2339)

使用 addTask 函数的组件文件：

const { addTask } = useTasks();

addTask 函数：

const addTask = async (title: string) => {
    const taskRef = await addDoc(tasksCollection, {
      title,
      desc: "",
      completed: false,
    });
  };

类型声明：

export type TaskContextType = {
  tasks: ITask[];
  addTask: (title: string) => Promise<void>;
};

任务上下文本身：

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

编辑：useTasks(); 钩子：

export const useTasks = () => useContext(TasksCtx);

答案＃1

对我来说，解决方法是让 createContext() 不带参数

const TasksCtx = createContext();

答案＃2

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

你的默认值是 null，并且它的类型可能是 null，所以你需要先缩小类型范围。

const context = useContext(...)
if (context !== null) {
   context.addTask
}