React Context + TypeScript 迁移报错：类型'undefined'不存在'handleVideoAdd'等属性

这个错误Property 'handleVideoAdd' does not exist on type 'undefined'. TS2339的核心原因是：你创建Context时初始值设为了undefined，TypeScript会据此推断出useContext(Context)的返回类型就是undefined——自然没法解构出handleVideoAdd这些属性。下面是具体的修复步骤：

步骤1：定义Context的完整类型接口 #

首先在Context.tsx中，为你的上下文数据定义清晰的TypeScript接口，把所有需要共享的状态和方法都包含进去：

import { useEffect, useMemo, useState } from "react";
import { youtubeApi } from "./APIs/youtubeAPI";
import { vimeoApi } from "./APIs/vimeoAPI";
import React from "react";
import type { FormEvent, ChangeEvent, ReactNode } from "react";

// 先定义视频数据的类型
interface VideoItem {
  id: string;
  key: string;
  name: string;
  thumbnail: string;
  viewCount: number;
  likeCount: number;
  savedDate: Date;
  favourite: boolean;
  source: string;
  url: string;
}

// 再定义整个Context的类型
interface AppContextType {
  inputURL: string;
  videoData: VideoItem[];
  handleInputURLChange: (e: ChangeEvent<HTMLInputElement>) => void;
  handleVideoAdd: (e: FormEvent<HTMLFormElement>) => void;
  deleteVideo: (key: string) => void;
  toggleFavourite: (key: string) => void;
  handleFilterChange: (type: string) => void;
  videoSources: string[];
  sortDataBy: (sortBy: string) => void;
  deleteAllData: () => void;
  exportToJsonFile: () => void;
  handleJsonImport: (e: ChangeEvent<HTMLInputElement>) => void;
  handleVideoModalClose: () => void;
  handleVideoModalShow: (videoItem: VideoItem) => void;
  showVideoModal: boolean;
  modalData: {
    src: string;
    name: string;
  };
  showWrongUrlModal: boolean;
  handleWrongUrlModalShow: () => void;
  handleWrongUrlModalClose: () => void;
}

步骤2：为createContext指定类型 #

接下来修改Context的创建代码，给它指定我们刚定义的AppContextType。这里有两种安全的方式：

方式A：使用Partial允许初始值为undefined #

这种方式适合你确定所有使用Context的组件都会被ContextProvider包裹（不会出现useContext返回undefined的情况）：

// 指定Context类型为Partial<AppContextType> | undefined
const Context = React.createContext<Partial<AppContextType> | undefined>(undefined);

方式B：提供完整的默认值 #

如果担心某些组件可能不在Provider包裹下，可以提供一个空实现的默认值：

// 空函数，用于默认值
const noop = () => {};

// 创建Context并提供完整默认值
const Context = React.createContext<AppContextType>({
  inputURL: "",
  videoData: [],
  handleInputURLChange: noop,
  handleVideoAdd: noop,
  deleteVideo: noop,
  toggleFavourite: noop,
  handleFilterChange: noop,
  videoSources: [""],
  sortDataBy: noop,
  deleteAllData: noop,
  exportToJsonFile: noop,
  handleJsonImport: noop,
  handleVideoModalClose: noop,
  handleVideoModalShow: noop,
  showVideoModal: false,
  modalData: { src: "", name: "" },
  showWrongUrlModal: false,
  handleWrongUrlModalShow: noop,
  handleWrongUrlModalClose: noop,
});

步骤3：修复Header.tsx中的解构 #

如果用了方式A（Partial+undefined初始值），你需要告诉TypeScript“这个Context不会是undefined”，可以用非空断言!，或者做安全解构：

非空断言（适合确定组件在Provider内） #

export default function Header() {
  // 用!断言Context不会是undefined
  const { handleVideoAdd, inputURL, handleInputURLChange } = useContext(Context)!;
  return (
    // ... 原有JSX代码
  );
}

安全解构（更严谨） #

export default function Header() {
  const context = useContext(Context);
  // 用可选链+默认值处理可能的undefined
  const handleVideoAdd = context?.handleVideoAdd ?? (() => {});
  const inputURL = context?.inputURL ?? "";
  const handleInputURLChange = context?.handleInputURLChange ?? (() => {});
  
  return (
    // ... 原有JSX代码
  );
}

步骤4：完善ContextProvider的类型 #

最后给ContextProvider组件的props加上类型，让TS更清晰：

// 定义props类型，明确children是React节点
function ContextProvider({ children }: { children: ReactNode }) {
  // ... 原有逻辑代码
}

为什么之前JavaScript没问题？ #

因为JavaScript是弱类型语言，不会检查变量是否存在，而TypeScript会严格校验类型——当你从undefined中解构属性时，它会直接抛出错误提醒你潜在的运行时问题。

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