React渲染对象键值对列表时出现Type 'void'错误，求原因与解决办法

错误原因 #

你遇到的Type 'void' is not assignable to type 'ReactNode'错误，核心问题出在forEach方法的返回值上：

• Array.prototype.forEach()的返回值是**void（没有返回值）**，而React在JSX的表达式中，期望得到的是ReactNode类型的元素（或者可渲染的数组）。
• 当你在{}里写Object.entries(...).forEach(...)时，相当于把void类型的值传给了JSX，不符合React的类型要求，因此触发了类型错误。

修复步骤 #

• 用map代替forEach：Array.prototype.map()会返回一个新数组，数组内的每个元素就是你在回调中返回的<li>，这个数组符合ReactNode的类型要求。
• 正确渲染value：你代码里的<li>value</li>会直接渲染字符串"value"，需要改成<li>{value}</li>来引用遍历到的实际值。
• 添加唯一key属性：React列表元素需要唯一的key来优化渲染，这里可以用遍历的index或者key值（如果key本身是唯一的）。

修复后的完整代码 #

import { PersoanaType } from "./PersoanaType";

type Props = {
    persoana: PersoanaType
}

export default function PersoanaDetails(props: Props) {
    return (
        <ul>
            {
                props.persoana &&
                Object.entries(props.persoana).map(([key, value], index) => 
                    <li key={index}>{value}</li>
                )
            }
        </ul>
    );
}

优化建议 #

如果你的PersoanaType的key是唯一且稳定的字符串/数字，更推荐用key={key}代替index作为key，这样React的渲染性能会更好：

<li key={key}>{value}</li>

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