如何解决NextJs报错：Title元素接收多个子元素数组

问题原因 #

报错“Title element received an array with more than 1 element as children.”是因为<title>标签的子节点被解析成了多个元素数组。结合你的代码来看，大概率是以下两种情况：

• 使用MetaDataContainer时，传入的title不是纯字符串（比如传了JSX元素、数组等），导致CV-stack - {title}拼接后生成多个DOM节点
• TypeScript接口定义title?: string但实际传入了非字符串类型，未被类型检查拦截

解决方案 #

方案1：严格传递纯字符串title #

检查所有使用MetaDataContainer的页面，确保title属性只传纯字符串，示例：

// 正确用法
<MetaDataContainer title="个人简历">
  {/* 页面内容 */}
</MetaDataContainer>

方案2：强制转换title为字符串 #

如果无法保证传入的title始终是字符串，在拼接时强制转为字符串类型，避免生成数组节点：

// 修改MetaDataContainer中的title标签
<title>CV-stack - {String(title)}</title>

方案3：支持JSX类型的title（如果需要） #

如果确实需要在title中使用JSX元素，修改接口定义并将拼接内容用Fragment包裹，确保子节点是单一元素：

// 更新接口
interface IProps {
  children: React.ReactNode; // 同时建议把children改为React.ReactNode，支持多个子元素
  title?: React.ReactNode;
  restProps?: any;
}

// 修改title标签
<title>
  <>CV-stack - {title}</>
</title>

额外优化 #

你的children接口定义为JSX.Element，但实际页面可能传递多个子元素（比如多个组件或文本），这会导致TypeScript报错，建议改为React.ReactNode以支持所有合法的子节点类型。

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