React Context API报错：ReactNode类型不存在children属性

错误根源 #

你遇到的两个类型错误本质是同一个问题：AppProvider组件的props类型定义错误——你把组件props直接设成了ReactNode，但React组件的props是包含children属性的对象类型，而非直接的ReactNode。

具体修正方案 #

1. 正确定义AppProvider的Props类型 #

编写AppProvider时，需明确组件props类型为React.PropsWithChildren<{}>（无额外props时），或自定义接口并结合PropsWithChildren扩展。

示例修正代码：

import { createContext, useContext, useState, PropsWithChildren } from 'react';

// 定义Context的状态与方法类型
interface TodoContextType {
  todos: string[];
  addTodo: (todo: string) => void;
}

// 创建Context，默认值需匹配类型（或用null+后续非空判断）
const TodoContext = createContext<TodoContextType | null>(null);

// 用PropsWithChildren正确声明组件props
export function AppProvider({ children }: PropsWithChildren<{}>) {
  const [todos, setTodos] = useState<string[]>([]);

  const addTodo = (todo: string) => {
    setTodos(prev => [...prev, todo]);
  };

  return (
    <TodoContext.Provider value={{ todos, addTodo }}>
      {children}
    </TodoContext.Provider>
  );
}

// 自定义Hook封装Context获取逻辑
export function useTodo() {
  const context = useContext(TodoContext);
  if (!context) {
    throw new Error('useTodo必须在AppProvider内部使用');
  }
  return context;
}

2. 在main.tsx中正常使用AppProvider #

props类型修正后，即可正常接收children属性：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { AppProvider } from './context/AppProvider';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <AppProvider>
      <App />
    </AppProvider>
  </React.StrictMode>,
);

3. 组件中正常使用Todo状态 #

通过自定义Hook在组件中获取Context状态：

import { useTodo } from './context/AppProvider';

function App() {
  const { todos, addTodo } = useTodo();

  return (
    <div>
      <button onClick={() => addTodo('新待办')}>添加待办</button>
      <ul>
        {todos.map((todo, idx) => (
          <li key={idx}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

关键注意点 #

• 永远不要把React组件的props类型直接设为ReactNode，组件props是对象，children是其中的属性，类型为ReactNode。
• React.PropsWithChildren<T>可以快速给自定义props添加children属性，T为组件需要的额外props（无额外props传{}即可）。
• Context默认值要匹配定义的类型，或用null配合自定义Hook的非空判断，避免运行时错误。

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