TSX文件中Type 'Element'无法赋值给type 'string'错误求助

问题根源 #

你传入<AuthLayout>的<form>是JSX元素（Element类型），但AuthLayout组件的类型定义里，接收子内容的props（通常是children）被设置成了string类型，两者类型不匹配导致报错。

解决步骤 #

1. 打开AuthLayout组件的代码，找到它的props类型定义。
2. 将接收子内容的props类型从string修改为React.ReactNode（这是React官方推荐的、支持所有合法子元素的类型，包括字符串、JSX元素、元素数组等）。

示例修改 #

原错误的AuthLayout类型定义：

interface AuthLayoutProps {
  title: string;
  children: string; // 此处为问题点
}

修改后：

import React from 'react';

interface AuthLayoutProps {
  title: string;
  children: React.ReactNode; // 更新类型
}

3. 如果子内容不是通过children传递，而是其他自定义props，同样把对应props的类型改成React.ReactNode即可。

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