Next.js13 Shopify自定义店铺：商品页传Cart ID到购物车页为空

可能的核心原因 #

1. 异步操作顺序错误：点击加入购物车后，未等待Shopify API返回Cart ID就执行跳转，此时Cart ID还未生成或获取到。
2. React State更新的异步性：直接在setCartId后跳转，React的state更新是异步的，此时拿到的还是旧的空值。
3. Shopify API返回值未正确提取：调用加入购物车API后，没有从响应中正确获取Cart ID，导致传递的是空值。
4. 跳转参数拼接错误：跳转时参数名拼写错误、多余引号，或者参数值未正确赋值。

针对性解决方案 #

方案1：直接使用Shopify API返回的Cart ID（推荐） #

跳过依赖React State的步骤，在API调用成功后立即用返回的Cart ID拼接跳转URL，避免异步更新的问题。

示例代码（商品页）：

import { useRouter } from 'next/navigation'; // App Router 用这个，Pages Router 用 next/router

const ProductPage = ({ product }) => {
  const router = useRouter();
  const productVariantId = product.selectedVariant.id;

  const handleAddToCart = async () => {
    try {
      // 调用自定义API路由（或直接调用Shopify Storefront API）
      const res = await fetch('/api/add-to-cart', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          variantId: productVariantId,
          quantity: 1
        })
      });

      const cartData = await res.json();
      // 确认API返回了有效的Cart ID
      if (cartData.id) {
        // 直接用返回的ID拼接跳转URL
        router.push(`/cart?cartNumber=${cartData.id}`);
      } else {
        console.error('Shopify API未返回有效Cart ID');
      }
    } catch (err) {
      console.error('加入购物车失败:', err);
    }
  };

  return (
    <button onClick={handleAddToCart}>加入购物袋</button>
  );
};

export default ProductPage;

对应的/api/add-to-cart路由示例（处理Shopify Storefront API调用）：

// app/api/add-to-cart/route.js（App Router）
import { ShopifyStorefrontAPI } from '@/lib/shopify';

export async function POST(request) {
  const { variantId, quantity } = await request.json();
  // 调用Shopify Storefront API的cartLinesAdd或cartCreate接口
  const response = await ShopifyStorefrontAPI.mutate({
    mutation: `
      mutation cartLinesAdd($cartId: ID, $lines: [CartLineInput!]!) {
        cartLinesAdd(cartId: $cartId, lines: $lines) {
          cart {
            id
            lines {
              id
              quantity
            }
          }
        }
      }
    `,
    variables: {
      cartId: localStorage.getItem('cartId') || '', // 若已有购物车则复用，否则创建新的
      lines: [{ merchandiseId: variantId, quantity }]
    }
  });

  return Response.json(response.data.cartLinesAdd.cart);
}

方案2：监听State更新后再跳转 #

如果必须依赖React State传递Cart ID，需用useEffect监听State变化，确保值更新后再执行跳转：

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';

const ProductPage = ({ product }) => {
  const [cartId, setCartId] = useState('');
  const [shouldRedirect, setShouldRedirect] = useState(false);
  const router = useRouter();

  const handleAddToCart = async () => {
    const res = await fetch('/api/add-to-cart', { /* 同方案1的API调用 */ });
    const cartData = await res.json();
    setCartId(cartData.id);
    setShouldRedirect(true); // 标记需要跳转
  };

  // 监听cartId和shouldRedirect状态，满足条件时跳转
  useEffect(() => {
    if (shouldRedirect && cartId) {
      router.push(`/cart?cartNumber=${cartId}`);
      setShouldRedirect(false); // 重置状态，避免重复跳转
    }
  }, [cartId, shouldRedirect, router]);

  return <button onClick={handleAddToCart}>加入购物袋</button>;
};

额外检查点 #

1. 购物车页参数获取：确保购物车页正确读取URL参数，比如App Router中用searchParams：

// app/cart/page.js
export default function CartPage({ searchParams }) {
  const cartNumber = searchParams.cartNumber;
  // 后续用cartNumber调用Shopify API获取购物车数据
  return <div>购物车ID：{cartNumber}</div>;
}

2. 避免参数拼接错误：确保跳转URL中没有多余的引号，比如不要写成cartNumber=""，检查代码中是否有硬编码的空字符串拼接。
3. Shopify API权限：确认Storefront API的权限配置正确，允许读取和修改购物车数据。

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