如何访问React.Children或props.children中的数据？解决TypeScript类型报错问题

这个错误的根源在于TypeScript无法确定你遍历的每个子元素都是React元素——React.ReactNode类型包含了字符串、数字、布尔值、甚至null这些没有props属性的类型，所以直接访问child.props会触发类型检查错误。

要安全访问子元素的props.section，你需要先确保当前遍历的child确实是一个React元素，这里有两种常用的靠谱方式：

方式一：使用React.isValidElement做类型守卫 #

这是React官方提供的工具函数，能准确判断一个值是否为React元素，TypeScript也能识别这个判断并自动缩小类型范围：

import React from 'react';

// 假设这是你的父组件
function ParentComponent({ children }: { children: React.ReactNode }) {
  React.Children.map(children, (child) => {
    // 先判断是否为有效的React元素
    if (React.isValidElement(child)) {
      // 此时TS会自动推断child是ReactElement类型，props可以安全访问
      console.log(child.props.section);
    }
    return child;
  });

  return <div>{children}</div>;
}

方式二：类型断言（适合你确定所有子元素都是React元素的场景） #

如果你能保证传入的children全部是React组件（没有字符串、数字这类纯文本子节点），可以直接用类型断言告诉TypeScript这个child的具体类型：

import React from 'react';

function ParentComponent({ children }: { children: React.ReactNode }) {
  React.Children.map(children, (child) => {
    // 断言child为ReactElement，指定props的类型（如果需要更精确的类型）
    const element = child as React.ReactElement<{ section: any; onChange: () => void }>;
    console.log(element.props.section);
    return child;
  });

  return <div>{children}</div>;
}

如果你的子元素props有明确的类型定义，建议把any换成你实际的section类型，这样TypeScript还能帮你做更细致的类型检查。

额外提示 #

如果你的父组件只接受特定类型的子元素（比如自定义的Slide组件），可以直接在props类型里限制children的类型，从根源避免这类问题：

import React from 'react';

// 假设你的子组件是Slide，定义它的props类型
type SlideProps = {
  section: { /* 你的section类型定义 */ };
  onChange: () => void;
};

function Slide(props: SlideProps) {
  // 子组件逻辑
  return <div></div>;
}

// 父组件只接受Slide组件作为子元素
function ParentComponent({ children }: { children: React.ReactElement<SlideProps> | React.ReactElement<SlideProps>[] }) {
  React.Children.map(children, (child) => {
    // 这里child的类型已经是ReactElement<SlideProps>，可以直接访问props
    console.log(child.props.section);
    return child;
  });

  return <div>{children}</div>;
}

这样不仅解决了类型错误，还能在编译阶段就防止传入不符合要求的子元素，让代码更健壮。

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