无法将“object”（“[object Object]”）序列化为JSON。请仅返回可序列化为JSON的数据类型。

Question

我正在使用NextJS，之前我使用fetch()调用内部/api路由来获取数据。但是，我意识到在生产环境中，它不允许你在getServerSideProps中使用内部api调用。因此，我试图直接从getServerSideProps调用我的MongoDB数据库。

我的问题是，我得到了一个错误，我的posts数据作为props传递时不可序列化: "对象("[object Object]")无法作为JSON序列化。请仅返回可序列化的JSON数据类型."

我不明白为什么会出现这个问题，因为它的形式为：[object Object]，[object Object]，[object Object]等，当它被传递时应该可以工作？

以下是我的代码供参考（代码下面有解释）：

export async function getServerSideProps() {
    let returnID = null
    let posts = []
    let error = false
    try {
        const client = await MongoClient.connect(`mongodb+srv://MYUNIQUEMONDODBCONNECTIONDATA`);
        const db = client.db();
        const postsCollection = db.collection("posts");
        const result = await postsCollection.find({}).limit(10).toArray();
        console.log("RESULT: " + result)
        client.close();
        posts = result.map(r => {
            return {
                title: r.title,
                body: r.body,
                id: r._id,
            }
        });
        if (posts[posts.length - 1]?.id) { // make sure it's not undefined
            returnID = posts[posts.length - 1]?.id;
        }
    }
    catch (error) {
        error = true
    }
    return {
        props: {
            startingID: String(returnID),
            startingError: error,
            startingPosts: posts,
        }
    }
}

我从数据库中接收到的数据大致如下：[{"title":"1","body":"1","id":"6276767ca21167f5043d3dc8"},{"title":"2","body":"2","id":"6276767fa21167f5043d3dc9"},{"title":"3","body":"3","id":"62767682a21167f5043d3dca"}, 等等。]这个格式是否与我作为props传递的posts匹配？

行console.log("RESULT: " + result)打印：[object Object],[object Object],[object Object],[object Object], 等等。

@jabaa的答案：将返回更改为此行：startingPosts: JSON.parse(JSON.stringify(posts))

- Matthew Trent

---

是的，一切似乎都没问题，直到它实际运行通过道具并出现错误。 - Matthew Trent

什么是“数据”？为什么要覆盖“帖子”？ - jabaa

@Inder，我刚刚修复了这两个问题，你发现得好。不过我仍然会得到相同的错误。 - Matthew Trent

请尝试访问此链接：https://github.com/vercel/next.js/issues/11993#issuecomment-879857441 - Inder

这是“官方”的方法；使用lean（）从返回的mongo文档中删除函数和类似项。 - user5734311

Answer 1

return {
        props: {
            startingID: String(returnID),
            startingError: error,
            startingPosts: JSON.parse(JSON.stringify(posts)),
        }
    }

正如Chris所提到的，您可以使用.lean()方法。

- Inder

---

.lean() 对我来说并没有解决错误，但是 JSON.parse(JSON.stringify(posts)) 可以。不过这似乎是一个奇怪的 hack，难道没有更“正规”的方法来解决吗？ - Julius

@Julius 目前我只能找到两个解决方案。如果 lean 不起作用，那么现在你就必须坚持使用这种解析和字符串化的方法。 - Inder