React TypeScript中AppStateProvider报TS2739错误的原因？

问题根源 #

你错误地将AppStateProvider组件的props类型设置为了AppStateContextProps（包含lists、getTasksByListId），但实际上AppStateProvider只需要接收children属性——lists和getTasksByListId是Context内部要提供给子组件的值，不是传给Provider的外部props。

修复步骤 #

1. 拆分类型定义 #

把Context值的类型和Provider组件的props类型分开：

// 定义Context要提供的值的类型
interface AppStateContextValue {
  lists: List[]; // 替换成你的List实际类型
  getTasksByListId: (id: string) => Task[]; // 替换成你的Task实际类型
}

// Provider组件的props只需要children，用React内置类型简化
type AppStateProviderProps = React.PropsWithChildren<{}>;

2. 修正Provider组件实现 #

在Provider内部生成或获取lists、getTasksByListId的值，再通过Context.Provider传递给子组件：

import { createContext, useCallback, useState } from 'react';

export const AppStateContext = createContext<AppStateContextValue | undefined>(undefined);

export const AppStateProvider = ({ children }: AppStateProviderProps) => {
  // 示例：用useState模拟lists数据，实际项目可能从API/状态管理获取
  const [lists, setLists] = useState<List[]>([]);

  // 定义getTasksByListId方法
  const getTasksByListId = useCallback((listId: string) => {
    // 这里写你的业务逻辑，比如从lists中筛选对应id的任务
    return lists.find(list => list.id === listId)?.tasks || [];
  }, [lists]);

  return (
    <AppStateContext.Provider value={{ lists, getTasksByListId }}>
      {children}
    </AppStateContext.Provider>
  );
};

3. 优化Context使用（可选） #

为了避免在子组件中处理undefined，可以封装一个自定义Hook：

export const useAppState = () => {
  const context = useContext(AppStateContext);
  if (!context) {
    throw new Error('useAppState must be used within an AppStateProvider');
  }
  return context;
};

验证修复 #

现在在Index.tsx中使用AppStateProvider包裹<App />时，只需要传children，TypeScript就不会再报错：

import { AppStateProvider } from './AppStateContext';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <AppStateProvider>
    <App />
  </AppStateProvider>
);

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