在JSX内使用Array.reduce()返回JSX时出现TypeScript错误

错误原因分析 #

你的代码存在三个核心问题：

• reduce未指定初始值，TypeScript推断累加器类型为ReactElement，但后续迭代返回的是数组，类型不匹配触发报错。
• 每次reduce返回[p, <span>, c]会生成嵌套数组（例如第二次迭代时p是前一次的数组），React运行时能勉强兼容，但构建过程中会因结构异常导致输出错误。
• 使用数组索引作为key违反React最佳实践，可能引发组件重渲染异常。

修复后的代码 #

import type { ReactNode } from 'react';

function getText(items: { id: number, value: string }[]) {
  return (
    <span>
      {items.reduce<ReactNode[]>((acc, { id, value }, index) => {
        // 非第一个元素前加分隔符
        if (index > 0) {
          acc.push(<span key={`separator-${id}`} className="syntax-operator">, </span>);
        }
        acc.push(<>{value}</>);
        return acc;
      }, [])}
    </span>
  );
}

修复细节说明 #

1. 类型明确化：显式指定reduce的累加器类型为ReactNode[]，并传入空数组作为初始值，确保TypeScript能正确推断返回类型，解决类型报错。
2. 避免数组嵌套：通过acc.push()直接构建扁平的可渲染节点数组，符合React的渲染结构要求，消除构建时的异常。
3. 合理设置key：使用每个item的id生成分隔符的key，保证key的唯一性，避免索引key带来的潜在问题。

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