typescript报错：类型“ReactNode”的参数不能赋给类型“ReactElement＜any, string | JSXElementConstructor＜any＞＞”的参数，如何解决？

最近在做antd项目，使用typescript写layout组件，通过cloneElement给子组件的props添加initialState中的数据遇到飘红：

类型“ReactNode”的参数不能赋给类型“ReactElement<any, string | JSXElementConstructor<any>>”的参数。

这里涉及到下面两个知识点：

ReactNode

这是一种联合类型，可以是string、number、ReactElement、{}、boolean、ReactNodeArray。
是render的返回值，可以理解为展示到页面上的节点内容。

ReactElement

这是一种包含type、props、key这3种属性的对象。
type：组件的类型
props：组件的参数
key：组件的各种属性键值对
可以理解为虚拟dom里的组件，不能直接展示到页面上。

解决飘红很简单，将ReactNode类型转成ReactElement就行，代码如下：

{cloneElement(<>{children}</>, { ...currentUser, refresh })}

即将ReactNode用空节点包住，即可将ReactNode转成ReactElement。
但是又遇到了新的问题，这样children节点收不到props。

以上问题已有解决方法。
注意，使用umi框架的，可以通过定义app.tsx里的layout来解决。

启用layout

编辑@/config/config.ts文件，启用layout：

    layout: {
        // https://umijs.org/zh-CN/plugins/plugin-layout
        ...defaultSettings,
      },

编辑app.tsx

import type { RunTimeLayoutConfig } from 'umi'  // 必须启用layouut插件才能导入
import { cloneElement } from 'react'


// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {

    return {
        rightContentRender: () => <RightContent setInitialState={setInitialState} />,
        footerRender: () => <Footer />,
        disableContentMargin: false,
        onPageChange: () => {
            // 如果没有登录，重定向到 login
            if (initialState == null) {
                history.push('/user/login')
            }
        },
        childrenRender: (children) => {
            if (!initialState || (!initialState.currentUser && history.location.pathname !== loginPath))
                return <PageLoading />  // 初始状态为空 或 初始状态中当前用户为空且当前路径不是登录路径,那么返回空页面!
            return (
                <>
                    {cloneElement(children, { ...initialState.currentUser })}
                </>
            )
        },
        ...initialState?.settings,
    };
};

在这里写cloneElement，这里收到的children是JSX.Element类型，传给cloneElement不会飘红。
在这里可以将initialState中的数据传给各个页面组件。这样就不需要在各个页面组件中去用useModel(’@@initialState’)去获取初始数据。
但是需要提醒的是，一级路由下的页面可以正常收到初始数据，但二级路由下的页面不能收到，因为二级路由页面外面包了一层switch。
在umi官网中有关内容“传参数给子路由”，按照里面的方法并不能解决问题。