Babel与React：组件Props中对象解构报Unexpected token错误

在React组件属性中使用对象解构时触发语法错误，错误提示为Unexpected token (172:13)，报错代码位置如下：

170 |         }),
  171 |       }}
> 172 |       items={...sideNavigationSectionItems}
      |              ^
  173 |     />
  174 |   );
  175 | }

我的Babel配置应该支持对象展开语法，配置内容如下：

presets: [
      [
        '@babel/preset-env',
        {
          useBuiltIns: 'usage',
          corejs: '3.25',
          bugfixes: false,
        },
      ],
      '@babel/preset-react',
      '@babel/preset-typescript',
    ],
    plugins: [
      [
        '@babel/plugin-transform-runtime',
        {
          regenerator: true,
        },
      ],
      '@babel/plugin-proposal-object-rest-spread',
      '@babel/plugin-transform-destructuring',
      '@babel/plugin-transform-spread',
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-transform-classes',
    ],

问题原因与解决办法 #

你遇到的不是Babel配置问题，而是JSX属性写法错误：

• 若要把sideNavigationSectionItems完整对象作为items属性的值传递给组件，直接赋值即可：

  items={sideNavigationSectionItems}
  

• 若要把sideNavigationSectionItems对象中的所有键值对作为组件的独立属性传递（比如对象包含title、icon等字段，直接转为组件的对应属性），需去掉items=，直接写对象展开：

  {...sideNavigationSectionItems}
  

items={...sideNavigationSectionItems}属于非法JSX语法：JSX属性值必须是合法的JavaScript表达式，直接在属性值内展开对象无语义且不符合语法规范，因此Babel无法解析，抛出Unexpected token错误。你的Babel配置已包含@babel/plugin-proposal-object-rest-spread，完全支持对象展开语法，修正写法即可解决问题。

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