React中IntlProvider无法作为JSX组件使用的问题求助

DevOps 小满

2026-6-28

问题：IntlProvider无法作为JSX组件使用

报错信息：

'IntlProvider' cannot be used as a JSX component.
  Its type 'typeof IntlProvider' is not a valid JSX element type.
    Type 'typeof IntlProvider' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
      Construct signature return types 'IntlProvider' and 'Component<any, any, any>' are incompatible.
        The types returned by 'render()' are incompatible between these types.
          Type 'Element' is not assignable to type 'ReactNode'.
            Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.

我的组件代码：

import { ReactNode, useContext } from "react";
import { IntlProvider } from "react-intl";
import flatten from "flat";
import { LocaleContext, LocaleContextType } from "./locale-context-provider";
import { translations } from "./translations";

const TranslationProvider = ({
  children
}: {
  children: ReactNode;
}): JSX.Element => {
  const [locale] = useContext(LocaleContext) as LocaleContextType;
  const messages: Record<string, string> = flatten(translations[locale]);

  return (
    <IntlProvider locale={locale as string} messages={messages}>
      {children}
    </IntlProvider>
  );
};

export default TranslationProvider;

解决办法

检查版本兼容性：react-intl v6及以上版本要求React 18.x，若你用的是React 17或更低版本，要么升级React到18.x，要么把react-intl降级到v5.x（v5兼容React 16.8+）。
统一类型包版本：如果用TypeScript，确保@types/react和@types/react-dom的版本与React本身版本一致，比如都安装@types/react@^18.2.0和@types/react-dom@^18.2.0，避免类型定义冲突。
重置依赖：删除node_modules文件夹、package-lock.json（或yarn.lock），重新执行npm install或yarn install，排除依赖安装不完整或缓存问题。
校验Context类型：检查LocaleContextType的定义是否正确，确保locale为字符串类型，减少不必要的类型断言可能引发的隐性问题。