Next.js getServerSideProps返回customerId序列化错误求助

这个错误的核心原因很明确：你在getServerSideProps里调用异步函数createCustomer()时没有等待它完成，导致函数直接走到return语句，此时customerId还是初始的undefined，而Next.js要求从getServerSideProps返回的props必须是可序列化的JSON，undefined不满足这个要求，所以抛出了序列化错误。

下面是具体的修复步骤和优化建议：

1. 必须等待异步函数执行完成 #

createCustomer是一个异步函数，但你在调用它的时候没有加await，这意味着getServerSideProps不会等它执行完就直接返回props了。修改这一行：

// 原来的代码（错误）
if (session) {
  createCustomer()
}

// 修改后
if (session) {
  await createCustomer() // 加上await，等待异步操作完成
}

2. 处理customerId可能为undefined的边界情况 #

即使加上了await，也可能因为API调用失败、找不到客户等情况导致customerId还是undefined。所以在返回props的时候，给它一个默认的null值，确保可以正常序列化：

return {
  props: {
    customerId: customerId ?? null // 使用空值合并运算符，undefined时返回null
  },
}

3. 优化createCustomer函数（可选，让代码更健壮） #

当前createCustomer是通过修改外部变量customerId来传递结果，这种闭包赋值的方式不够清晰，建议改成让函数直接返回customerId，代码可读性更好：

// 重构createCustomer函数
const createCustomer = async () => {
  try {
    const checkCustomer = await stripe.customers.search({
      query: `email: '${email}'`
    })
    const customerAvailable = checkCustomer.data
    if (customerAvailable.length) {
      return customerAvailable[0].id // 直接返回客户ID
    } else {
      const res = await fetch('/api/create-customer', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email })
      })
      const newCustomer = await res.json();
      return newCustomer.customer.id // 返回新创建的客户ID
    }
  } catch (error) {
    console.log(error)
    return null // 出错时返回null
  }
}

// 然后在getServerSideProps里这样调用
if (session) {
  customerId = await createCustomer() // 直接接收返回值
}

额外检查点 #

• 确认session.user.email一定存在：如果session存在但user为null（虽然这种情况很少见），会导致后续代码报错，建议加个判断：

  if (!session?.user?.email) {
    // 处理没有邮箱的情况，比如重定向或者返回空props
    return { props: { customerId: null } }
  }
  

修改完这些之后，customerId就不会再是undefined了，序列化错误也就解决了。

内容的提问来源于stack exchange，提问作者Iheanacho Amarachi Sharon