Next.js子元素类型判断及升级13后TypeScript错误排查

升级Next.js 13并更新依赖后，出现以下TypeScript错误：

Argument of type 'ReactI18NextChild | Iterable' is not assignable to parameter of type 'ReactNode | ReactNode[]'.

同时需要优化组件子元素是否为字符串的判断逻辑，以下是具体解决方案：

一、类型错误修复 #

问题根源是react-i18next 12.0.0更新后，ReactI18NextChild类型与React官方ReactNode的兼容性变化，导致buttonProps.children类型不匹配。

修复步骤： #

修改组件Props接口，明确兼容react-i18next的子元素类型：

import React, { ButtonHTMLAttributes } from 'react';
import { ReactI18NextChild, TransProps } from 'react-i18next';
import { parseBackgroundColor, parseColor, parseBorderColor, parseFontSize } from 'styles/styles';

// 扩展Button属性并兼容i18n子元素类型
interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  otherProps?: unknown; // 替换any为unknown，提升类型安全
  children?: ReactI18NextChild | ReactI18NextChild[];
}

function Button({ otherProps, ...buttonProps }: Props) {
  // 子元素判断逻辑
  const hasTextContent = React.Children.toArray(buttonProps.children).some(child => {
    // 判断基础文本类型
    if (typeof child === 'string' || typeof child === 'number') {
      return true;
    }
    // 判断文本类HTML元素
    const element = child as React.ReactElement;
    if (typeof element.type === 'string' && ['span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(element.type)) {
      return true;
    }
    return false;
  });

  return <button {...buttonProps}>{buttonProps.children}</button>;
}

也可以直接复用react-i18next的TransProps子元素类型，简化定义：

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  otherProps?: unknown;
  children?: TransProps['children'];
}

二、子元素判断逻辑优化 #

原逻辑存在any断言过于宽泛的问题，优化后：

• 先直接判断字符串、数字这类基础文本类型
• 对React元素，用React.ReactElement约束类型，再判断其type是否为指定的HTML标签名（确保type是字符串类型的标签，排除自定义组件）

如果需要判断所有子元素都是文本类内容，只需把some替换为every即可。

三、额外建议 #

• 避免使用any类型，用unknown替代并配合类型收窄，提升代码类型安全
• 检查是否安装了@types/react-i18next，确保类型定义完整

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