React Context导入函数在TypeScript类型上不存在的问题求助

问题原因 #

你猜的没错，这个错误就是因为React.createContext({})传入的初始值是空对象，TypeScript会自动推断这个Context的类型为{}，所以当你在组件里解构fetchAll时，TypeScript认为这个属性不存在于空对象类型上，就抛出了错误。

正确实现步骤 #

1. 定义Context的类型接口 #

首先在DataContext文件里，先定义一个接口来描述Context value的结构，明确包含的方法类型：

import React, { PropsWithChildren } from 'react';

// 定义Context value的类型
interface DataContextType {
  fetchAll: (userId: string) => Promise<void>;
}

2. 初始化Context并指定类型 #

接下来用这个接口约束createContext的类型，同时提供符合类型的初始值（用空函数占位，避免运行时错误）：

// 初始化Context，指定类型并提供符合要求的初始值
export const DataContext = React.createContext<DataContextType>({
  fetchAll: async () => {}
});

3. 完善DataProvider代码 #

你的DataProvider逻辑没问题，确保PropsWithChildren从React导入即可，完整的DataContext文件代码如下：

import React, { PropsWithChildren } from 'react';

interface DataContextType {
  fetchAll: (userId: string) => Promise<void>;
}

export const DataContext = React.createContext<DataContextType>({
  fetchAll: async () => {}
});

export const DataProvider = ({ children }: PropsWithChildren) => {
  const fetchAll = async (userId: string) => {
    // 你的业务逻辑
  };

  return (
    <DataContext.Provider value={{ fetchAll }}>
      {children}
    </DataContext.Provider>
  );
};

4. 组件中正常使用 #

现在你的Pending组件里解构fetchAll就不会再报错了，TypeScript能正确识别这个方法的类型：

import React, { useEffect, useContext } from 'react';
import { DataContext } from '../../context/DataContext';

type Props = {
  text: string;
  subcontent: string;
  id: string;
};

export const Pending = ({ text, subcontent, id }: Props) => {
  const { fetchAll } = useContext(DataContext);

  useEffect(() => {
    // TypeScript会自动校验参数类型
    fetchAll(id);
  }, [fetchAll, id]);

  return (
    <div>{text}</div>
  );
};

额外提示 #

• 不要给Context传入不符合最终value结构的初始值，TypeScript依赖这个初始值推断类型，要么显式指定类型并提供合法初始值，要么用类型断言处理（但不推荐）。
• 确保所有使用Context的组件都被对应的Provider包裹，避免出现undefined相关的类型错误。

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