React服务端组件渲染Contentful内容报错：Objects are not valid as a React child

你遇到的核心问题是：description字段是Contentful返回的Rich Text结构化对象（包含nodeType、data、content这些键），不是普通字符串。你用as string只是TypeScript类型断言，并没有把实际的对象转换成字符串，所以React还是会尝试渲染对象，触发报错。

解决步骤： #

1. 安装Contentful官方的Rich Text渲染库

npm install @contentful/rich-text-react-renderer

2. 修改代码，用工具将Rich Text对象转为可渲染的React元素

import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const getPortfolios = async () => {
    const entries = await client.getEntries({ content_type: "portfoliov2" });
    return entries.items;
}

const archive = async () => {
    const response = await getPortfolios()

    return (
        <div className="flex min-h-screen flex-col items-center justify-between p-24">
            {response.map((portfolio, index) => {
                const { name, description } = portfolio.fields;
                return (
                    <div key={index}>
                        <Table>
                            <TableCaption>A list of your recent invoices.</TableCaption>
                            <TableHeader>
                                <TableRow>
                                    <TableHead className="w-[100px]">name</TableHead>
                                    <TableHead>Description</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                <TableRow>
                                    <TableCell className="font-medium">{name}</TableCell>
                                    {/* 用documentToReactComponents转换Rich Text对象 */}
                                    <TableCell>{documentToReactComponents(description)}</TableCell>
                                </TableRow>
                            </TableBody>
                        </Table>
                    </div>
                );
            })}
        </div>
    );
}

export default archive

额外说明： #

• 如果name字段也是Rich Text类型，同样用documentToReactComponents(name)处理
• 这个方法支持React服务端组件，不需要额外配置
• 如果你需要自定义Rich Text的渲染样式，可以给documentToReactComponents传第二个参数（渲染选项），比如自定义节点样式、处理链接等

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