如何解决React.Children.map在TypeScript中的子组件类型报错？

嗨，这个问题我之前也碰到过，其实核心是你搞混了**组件定义（FC）和组件实例（ReactElement）**的类型！你在Wizard里用React.Children.map遍历的子元素，并不是WizardStep这个函数组件本身，而是它被渲染出来的ReactElement实例——所以你直接把child当成FC类型来取props，TypeScript肯定会报错啦。

下面给你几种靠谱的解决方法，按需选就行：

方法1：直接断言子元素类型（简单快速） #

如果能确保传入Wizard的子组件全是WizardStep，可以直接把child断言为ReactElement<{ title: string }>，然后从child.props里取title：

import { ReactNode, Children, ReactElement } from 'react';

const WizardStep: React.FC<{ title: string }> = ({ title }) => {
  return <div>{title}</div>;
};

const Wizard: React.FC<{ children: ReactNode }> = ({ children }) => {
  const stepTitles = Children.map(children, (child) => {
    // 断言child是WizardStep的实例元素
    const stepElement = child as ReactElement<{ title: string }>;
    return stepElement.props.title;
  });

  return <div>步骤标题：{stepTitles?.join(', ')}</div>;
};

方法2：用类型守卫做严谨校验（更安全） #

如果担心会有非WizardStep的子组件被传入，可以写一个类型守卫函数，先判断子元素的合法性，再取title：

import { ReactNode, Children, ReactElement } from 'react';

const WizardStep: React.FC<{ title: string }> = ({ title }) => {
  return <div>{title}</div>;
};

// 自定义类型守卫：判断是否是合法的WizardStep元素
const isWizardStep = (child: ReactNode): child is ReactElement<{ title: string }> => {
  return (
    React.isValidElement(child) && // 先确认是React元素
    'title' in child.props // 再确认props里有title属性
  );
};

const Wizard: React.FC<{ children: ReactNode }> = ({ children }) => {
  const stepTitles = Children.map(children, (child) => {
    if (isWizardStep(child)) {
      return child.props.title;
    }
    // 非法子元素可以返回null或者自定义提示
    return null;
  });

  // 过滤掉null值，再展示
  return <div>步骤标题：{stepTitles?.filter(Boolean).join(', ')}</div>;
};

方法3：限制Wizard的children类型（从源头避免错误） #

如果想直接在TypeScript层面强制Wizard只能接受WizardStep作为子组件，可以把children的类型定义为ReactElement<{ title: string }>[]——这样一旦传入非WizardStep的组件，TypeScript会直接在编译阶段报错，不用等到运行时：

import { ReactElement, Children } from 'react';

const WizardStep: React.FC<{ title: string }> = ({ title }) => {
  return <div>{title}</div>;
};

// 明确限制children只能是WizardStep元素数组
const Wizard: React.FC<{ children: ReactElement<{ title: string }>[] }> = ({ children }) => {
  const stepTitles = Children.map(children, (child) => {
    return child.props.title;
  });

  return <div>步骤标题：{stepTitles?.join(', ')}</div>;
};

// 错误示例：传入非WizardStep组件会直接报错
// <Wizard>
//   <div>这不是WizardStep</div> {/* TypeScript编译报错 */}
// </Wizard>

本质上，你原来的代码错在把React.Children.map返回的child当成了WizardStep这个组件函数（FC类型），但实际上child是组件被渲染后的实例对象（ReactElement类型）——搞清楚这个区别，问题就迎刃而解啦～

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