React TypeScript中访问child.type.name时的类型错误问题求助

嗨，这个问题我之前在开发React TS项目时也踩过坑！TypeScript在这里的类型检查确实很严谨，报错的核心原因是React元素的type属性有两种可能的类型：

• 对于原生HTML标签（比如<div>、<p>），type是字符串类型（比如'div'），自然没有name属性；
• 对于自定义函数/类组件，type是组件的构造函数（函数或类），这时候才会有name属性。

我们只需要通过类型守卫区分这两种情况，就能让TypeScript清楚地知道什么时候可以安全访问name。

方案1：直接用typeof做类型判断 #

最简单的方式就是在代码里直接判断child.type是不是字符串，TS会自动推导类型：

const memoizedIterateAndAddProps = useCallback(
  (kids: React.ReactNode) => {
    return React.Children.map(kids, (child) => {
      if (React.isValidElement(child)) {
        // 区分原生标签和自定义组件
        if (typeof child.type !== 'string') {
          // 这里TS会自动识别child.type是组件构造器，允许访问name
          console.log('自定义组件名:', child.type.name);
        } else {
          // 处理原生HTML标签的情况
          console.log('原生标签:', child.type);
        }
      }
      // 务必返回child，否则map会生成undefined数组，导致子元素丢失
      return child;
    });
  }, []
);

方案2：自定义类型守卫函数（更清晰） #

如果需要多次做这种判断，可以封装一个类型守卫函数，让代码可读性更高：

// 定义类型守卫，判断元素是否为自定义组件
function isCustomComponent(
  element: React.ReactElement
): element is React.ReactElement<unknown, JSXElementConstructor<unknown>> {
  return typeof element.type !== 'string';
}

// 使用类型守卫
const memoizedIterateAndAddProps = useCallback(
  (kids: React.ReactNode) => {
    return React.Children.map(kids, (child) => {
      if (React.isValidElement(child)) {
        if (isCustomComponent(child)) {
          console.log('自定义组件名:', child.type.name);
        } else {
          console.log('原生标签:', child.type);
        }
      }
      return child;
    });
  }, []
);

小提醒 #

如果你的自定义组件是匿名函数组件，child.type.name会是空字符串或者"Anonymous"，这是JavaScript函数的特性，和TypeScript无关，需要额外处理这种情况哦～

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