react中使用react-i18next+ts的坑

先上报错，这是我在组件页面定义变量的时候碰到的，如下

TS2322: Type 'TFunctionResult' is not assignable to type 'ReactNode'.
  Type 'object' is not assignable to type 'ReactNode'.

react-i18next是react中国际化最常用的插件，最近本人在做一个ts+国际化的项目，
首先我按照官网的示例代码进行配置，新建i18n并创建config.ts，配置如下

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import translation_en from "./en.json";
import translation_zh from "./zh.json";

const resources = {
  en: {
    translation: translation_en,
  },
  zh: {
    translation: translation_zh,
  },
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: "zh",
    // keySeparator: false, // we do not use keys in form messages.welcome
    // header.slogan
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

export default i18n;

标准的引入方式，然后我们再去组件进行渲染定义我们的变量，
根据官方标准，class组件我们需要使用HOC方式来引入

import { withTranslation, WithTranslation } from "react-i18next"

然后再包裹我们自己的组件

class HomeComonent extends React.Component<any & WithTranslation> {
render(){
	const {t} = this.props
	return (<>
  	{
  	t('home.title')
  	}
  </>)
  }
}
export const Home = withTranslation()(HomeComonent)

按理来说，如上就可以正常渲染了，但是我这边却提示报错，如下

TS2322: Type 'TFunctionResult' is not assignable to type 'ReactNode'.
  Type 'object' is not assignable to type 'ReactNode'.

如上，明显是ts的报错阻塞了，那么我们就需要换一种方式来引入，

import { Trans } from "react-i18next"

然后再需要使用的地方进行包裹

<p>
<Trans>home.title</Trans>
</p>


就可以解决如上报错，当然，这只是个人解决的方法，如果有更治本的方式，希望大家留言

顺便补充一下第三种定义方式，use钩子类型，适用于函数式组件

import React from "react";
import { Layout, Typography } from "antd";
import { useTranslation } from "react-i18next";

export const Footer: React.FC = () => {
  const { t } = useTranslation()
  return (
    <Layout.Footer>
      <Typography.Title level={3} style={{ textAlign: "center" }}>
        {
          t('home.title')
        }
      </Typography.Title>
    </Layout.Footer>
  );
};