React Modal被Portal包裹时出现TypeScript类型错误如何解决？

错误原因 #

React函数组件的第一个入参是完整的props对象，你当前直接将Portal的第一个参数声明为React.ReactNode类型，相当于把整个props对象当成了children使用，和实际传入的包含children属性的props结构不匹配，因此触发类型错误。

修复方案 #

修改Portal组件的参数定义，从props中解构出children即可，提供两种常用写法：

写法1：显式声明props类型

import ReactDOM from 'react-dom';
import React from 'react';

type PortalProps = {
  children: React.ReactNode
}
export const Portal = ({ children }: PortalProps) => {
  const el = document.getElementById('portal') as HTMLElement;
  // 可选兼容处理：节点不存在时提前返回
  if (!el) return null;
  return ReactDOM.createPortal(children, el);
};

写法2：使用React内置FC类型（无需额外声明children）

import ReactDOM from 'react-dom';
import React from 'react';

export const Portal: React.FC = ({ children }) => {
  const el = document.getElementById('portal') as HTMLElement;
  if (!el) return null;
  return ReactDOM.createPortal(children, el);
};

修复后原调用代码不需要做任何修改，类型错误会自动消失。

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