TypeScript报错：类型'ReactNode'不存在'children'属性 求解决方案

这个错误的核心原因很简单：你把整个props对象的类型直接设成了ReactNode，但实际上props是一个包含children属性的对象，而children本身的类型才是ReactNode。TypeScript自然会报错——因为ReactNode类型里根本没有children这个属性呀！

下面是几种正确的类型定义方案，按需选择：

方案1：使用PropsWithChildren工具类型（最推荐） #

React内置了PropsWithChildren工具类型，它会自动帮你在自定义props类型基础上添加children: ReactNode属性，非常简洁：

import { ReactNode, PropsWithChildren } from 'react';

export const PageViewTracker = ({ children }: PropsWithChildren<{}>): ReactNode => {
  usePageView();
  return children;
};

如果你的组件需要其他props，只需要把{}换成对应的接口即可，比如：

interface TrackerProps {
  trackId: string;
}

export const PageViewTracker = ({ children, trackId }: PropsWithChildren<TrackerProps>): ReactNode => {
  usePageView(trackId);
  return children;
};

方案2：手动定义props接口 #

如果你喜欢更明确的类型声明，可以直接定义包含children的props接口：

import { ReactNode } from 'react';

interface PageViewTrackerProps {
  children: ReactNode;
}

export const PageViewTracker = ({ children }: PageViewTrackerProps): ReactNode => {
  usePageView();
  return children;
};

额外提示：关于返回值类型 #

你原来的返回值类型是ReactElement，但children的类型是ReactNode（它可以是单个元素、多个元素、字符串、null/undefined等），所以把返回值类型改成ReactNode会更准确，避免出现不必要的TypeScript警告。

之前你用ReactNode作为children类型正常，应该是之前的代码里正确地把children属性的类型设为ReactNode，而不是把整个props对象的类型设为ReactNode——这次只是不小心搞混了props对象和children属性的类型而已～

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