Vercel部署Next.js电商应用/dashboard预渲染报错求助

错误原因 #

预渲染/dashboard页面时，服务器端无用户会话，getCurrentUser()返回null，但代码直接将null传入getOrders()，若getOrders内部尝试访问user.id就会触发Cannot read properties of null (reading 'id')错误，导致预渲染失败。

修复步骤 #

1. 先判断用户再调用订单查询 #

修改Dashboard组件中的订单获取逻辑，仅当用户存在时才调用getOrders：

const Dashboard = async () => {
  const user = await getCurrentUser()
  // 仅当user存在时才查询订单，否则设为空数组
  const orders = user ? await getOrders(user) : []
  // ... 其余代码不变
}

2. 确保getOrders处理空用户 #

检查getOrders函数的实现，添加用户为空的判断，避免内部访问user.id报错：

// 示例getOrders的修复逻辑
export async function getOrders(user: any) {
  if (!user) return []; // 无用户时直接返回空数组
  // 原有的订单查询逻辑，使用user.id
}

3. 禁用预渲染，强制动态渲染 #

在/app/dashboard/page.tsx末尾添加动态渲染配置，避免Next.js预渲染未登录状态下的页面：

export default Dashboard
// 强制页面动态渲染，每次请求都执行服务器代码
export const dynamic = 'force-dynamic'

4. 额外的空值防护（可选） #

在渲染订单列表时，增加对order的空值判断，避免意外情况：

{orders && orders.length > 0 ? (
  <>
    {orders?.map((order) => {
      if (!order) return null; // 跳过空订单
      return (
        <div key={order.id} className="rounded-lg p-8 my-4 space-y-2 bg-gray-200">
          {/* ... 订单内容 */}
        </div>
      )
    })}
  </>
) : (
  <div>
    <h1>Nessun ordine piazzato</h1>
  </div>
)}

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