Next.js中Stripe+use-shopping-cart结账PropertyTypeError问题求助

错误根源 #

错误提示Invalid value with type "undefined" was received for stripe. Valid type for stripe is "string"表明：

• use-shopping-cart的redirectToCheckout方法无法获取到有效的Stripe公钥，导致初始化Stripe实例失败
• 调用redirectToCheckout的参数格式不符合要求

分步解决方案 #

1. 确保ShoppingCartProvider配置正确 #

在根布局（如layout.tsx）中，必须为ShoppingCartProvider传入Stripe公钥：

import { ShoppingCartProvider } from 'use-shopping-cart'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ro">
      <body>
        <ShoppingCartProvider
          mode="payment"
          cartMode="client-only"
          stripe="pk_YOUR_STRIPE_PUBLISHABLE_KEY" // 替换为你的Stripe公钥
          currency="RON"
          shouldPersist={true}
          successUrl="/success"
          cancelUrl="/cart"
        >
          {children}
        </ShoppingCartProvider>
      </body>
    </html>
  )
}

2. 修正redirectToCheckout的调用方式 #

原代码直接传递data.id的格式错误，需传入包含sessionId的对象：

async function onCheckout() {
  setLoading(true)
  try {
    const response = await fetch('/api/checkout', {
      method: "POST",
      body: JSON.stringify(cartDetails),
    })
    const data = await response.json()
    
    // 验证session是否返回有效id
    if (!data.id) {
      console.error('Stripe会话创建失败:', data)
      return
    }

    // 正确调用方式：传入包含sessionId的对象
    const result = await redirectToCheckout({ sessionId: data.id })
    if (result?.error) {
      console.error('结账重定向错误:', result.error)
    }
  } catch (err) {
    console.error('结账流程错误:', err)
  } finally {
    setLoading(false)
  }
}

3. 确保客户端加载Stripe.js #

在根布局中添加Stripe.js脚本，保证客户端能正常初始化Stripe：

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ro">
      <body>
        {/* 加载Stripe.js */}
        <Script src="https://js.stripe.com/v3/" strategy="lazyOnload" />
        
        <ShoppingCartProvider>
          {/* ...Provider配置 */}
          {children}
        </ShoppingCartProvider>
      </body>
    </html>
  )
}

4. 验证API返回的Session数据 #

在onCheckout中添加日志，确认API返回的session对象包含有效的id字段：

const data = await response.json()
console.log('Stripe会话:', data) // 检查输出是否有id字段

如果API返回错误，检查api/checkout/route.tsx中的Stripe实例配置是否正确，以及inventory数据是否符合validateCartItems的格式要求。

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