Next.js多层组件传props报React不支持展开子元素错误

该错误和Next.js服务端渲染机制无关，属于JSX基础语法错误，共两处问题：

• 不支持用展开运算符渲染子节点：React没有提供展开children的语法支持，你在<select>标签内写{...options}属于非法写法。存储React元素的数组直接放在单层大括号中即可被正常渲染，不需要做展开操作。
• 标签闭合错误：代码中select的结束标签误写为自闭合形式<select/>，会导致标签提前闭合，内部内容无法被识别为select的子节点，正确的闭合标签应为</select>。

你观察到的日志输出差异完全是代码逻辑导致的：Form组件中没有对传入的options做任何转换，打印结果自然是App组件中定义的普通选项对象数组；Select组件中你主动通过map把原始选项数据转换成了<option>标签对应的React元素，打印出带$$typeof: Symbol(react.element)属性的对象是这段转换逻辑的正常输出，和SSR没有关联。

另外你的代码还有一处不规范的点：循环渲染的列表项没有添加唯一key属性，会触发React的性能警告，渲染option时用option.value作为key即可。

function Select({options}) {
    // 不要直接重写props传入的变量，单独声明变量存储转换后的元素
    const optionElements = options?.map(option => {
        return <option key={option.value} value={option.value}>{option.label}</option>
    })
    return (
        <select>
            {optionElements}
        </select>
    )
}

App和Form组件的代码无需修改，替换Select组件后即可正常运行。

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