无法将后端返回的MongoDB文档数组映射到React组件

错误核心原因 #

这个错误是因为你在React渲染流程中直接输出了对象类型的值，而React只能渲染字符串、数字、JSX元素等基本类型或合法节点。结合你的代码，最可能的触发场景有两个：

• MongoDB返回的pubDate是Date对象（或BSON格式的日期对象），前端直接传入组件渲染时未做转换
• BlogItem组件内部直接渲染了对象类型的属性，未处理为可渲染的基本类型

具体解决方案 #

1. 前端层面转换日期字段 #

在Blog组件的遍历逻辑中，将pubDate转换为字符串格式：

blogs.map((blog) => (
    <BlogItem
        key={blog._id}
        title={blog.title}
        shortDesc={blog.shortDesc}
        imgSrc={blog.imgSrc}
        // 处理Date对象或BSON格式日期
        pubDate={typeof blog.pubDate === 'object' 
            ? new Date(blog.pubDate.$date || blog.pubDate).toLocaleDateString() 
            : blog.pubDate}
    />
))

2. 后端层面统一格式化数据 #

修改后端getBlogItems函数，提前将MongoDB返回的日期字段转为字符串，避免前端重复处理：

const getBlogItems = async () => {
    const conn = await connection();
    try {
        const blogs = await conn.find({}).toArray();
        // 遍历转换所有日期字段
        return blogs.map(blog => ({
            ...blog,
            pubDate: blog.pubDate.toISOString() // 或转为YYYY-MM-DD等可读格式
        }));
    } catch (err) {
        console.log(err);
    }
};

3. 检查并修正BlogItem组件 #

打开BlogItem.tsx，确保所有渲染内容都是基本类型。比如如果存在直接渲染对象的代码：

// 错误写法：直接渲染Date对象
<p>{props.pubDate}</p>

需改为：

// 正确写法：转为字符串后渲染
<p>{new Date(props.pubDate).toLocaleDateString()}</p>

辅助排查步骤 #

1. 在前端getBlogItems函数中打印单个博客对象的详细结构，确认哪个属性是对象类型：

console.log("单个博客数据:", data.blogs[0]);

2. 通过浏览器开发者工具的Network面板，查看/api/blogs接口的响应内容，确认返回字段的类型是否符合预期。

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