("[object Promise]") 不能序列化為 JSON

Question

完整錯誤：

錯誤：序列化從“/”中的getStaticProps返回的.b時出錯。 原因： object ("[object Promise]") 無法序列化為 JSON。 請僅返回 JSON 可序列化數據類型。

我正在嘗試調用我的一個函數，該函數從 API 端點檢索一些數據，但是在嘗試將此數據傳遞給道具時出現錯誤。 我不確定我做錯了什么，因為如果 fetch 調用在 GetStaticProps 中有效，但我希望所有用於 fetch 調用的邏輯都存在於單獨的 js 頁面中以減少冗余，但是這樣做時會創建此錯誤。

export async function getStaticProps() {

let b = WordpressService.getPageByIdTest(50);

return {
    props: {
        b: b,
    }, 
    revalidate: 30     
}

}

const WordpressService = {
    async getPageByIdTest(id) {
    
        const resIndexPage = await fetch(`${url}pages/${id}`);
        const indexPageData = await resIndexPage.json();

        return indexPageData;
    }
}

Answer 1

我正在查看最新版本的 nextjs，我確實注意到當我運行它時演示很奇怪。 具體來說，我在運行他們的示例時遇到了這個錯誤：

錯誤：從getStaticProps返回了其他鍵。 用於您的組件的屬性必須嵌套在props鍵下，例如

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch('..')
  return res.json()
}

這不完全是您的問題，但通過 res.json() 分配道具 object 也會導致您遇到相同的錯誤。

所以，對我來說，使用節點 15 我將 api 調用更改為：

export async function getStaticProps() {
    const url = `https://my-url`
    const result = await fetch(url)
    return { props: {
      result: await result.json()
    }}
}

這解決了我的問題。 所以 Ivar 的評論看起來是正確的 - 等待結果，然后在我的情況下，我還必須等待 node-fetch 的 json 結果，以便承諾正確完成。

Answer 2

使用 package “superjson”可以輕松解決。 有效且易於使用。 https://www.npmjs.com/package/superjson

對我來說，我想從其中包含時間戳的 firestore 轉換“QuerySnapshot”。

posts = (await getDocs(postQuery)).docs.map((postDoc) => {
  return superjson.stringify(postDoc);
});

圖片來自： https://www.npmjs.com/package/superjson