React TS中react-helmet提示不能作为JSX组件使用如何解决

这个错误基本都是React 18+版本和旧版@types/react-helmet类型不兼容导致的：@types/react-helmet@6.1.5 的类型定义是按照React 17的JSX规则写的，React 18修改了JSX组件的类型校验逻辑，直接用就会报「不能作为JSX组件使用」的错误。

按推荐优先级排序：

方案1：替换为维护中的react-helmet-async（最推荐） #

原react-helmet已经停止维护多年，不兼容React 18的并发渲染特性，现在生态内普遍用react-helmet-async作为替代，它自带TS类型，不用额外装类型包，API和原react-helmet完全一致。
操作步骤：

• 卸载旧依赖

yarn remove react-helmet @types/react-helmet

• 安装新依赖

yarn add react-helmet-async

• 在项目入口的根组件外层套上Provider

// 入口文件，比如main.tsx
import { HelmetProvider } from 'react-helmet-async';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <HelmetProvider>
    <App />
  </HelmetProvider>
)

• 业务组件里直接替换导入路径就行，写法和之前完全一样：

import { Helmet } from 'react-helmet-async'

interface TestComponentProps {}

const TestComponent: React.FC<TestComponentProps> = () => {
    return (
        <>
            <Helmet>
                <title>Content</title>
            </Helmet>
        </>
    )
}

export default TestComponent

方案2：临时类型补丁（不想换依赖时用） #

如果暂时不想替换原有依赖，可以直接给react-helmet补一个兼容React18的类型声明。找到项目里的全局类型文件，比如src/vite-env.d.ts（CRA项目是src/react-app-env.d.ts），没有的话就在src目录下新建一个global.d.ts文件，加入下面的代码：

declare module 'react-helmet' {
  import * as React from 'react';
  interface HelmetProps {
    children?: React.ReactNode;
    [key: string]: any;
  }
  export class Helmet extends React.Component<HelmetProps> {}
  export default Helmet;
}

加完之后重启TS服务（VSCode里按Ctrl+Shift+P，选择「TypeScript: Restart TS Server」），报错就会消失。

方案3：重装依赖对齐版本（仅React17及以下版本适用） #

如果你的项目用的是React17或者更低版本还出这个错，一般是依赖安装时类型包版本错位导致的，删掉node_modules文件夹和yarn.lock文件，重新执行yarn install重装所有依赖就能解决。

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