NextJS函数调用无法接收传入的cartId参数问题

问题根源很直接：你调用addItemToCart时传入的对象属性是savedCartId，但函数定义里解构的是cartId——对象解构是严格按属性名匹配的，所以函数找不到cartId这个属性，自然返回undefined，而itemId和quantity因为属性名完全对应，所以能正常获取。

修复方案（二选一即可） #

方案1：修改调用时的属性名 #

在addToCart函数里调用addItemToCart的时候，把savedCartId重命名为cartId：

const shopifyResponse = await addItemToCart({
  itemId,
  cartId: savedCartId, // 这里将属性名改为cartId，和函数解构的变量名对应
  quantity
})

方案2：修改函数的解构参数 #

如果不想改调用代码，可以调整addItemToCart的解构逻辑，把传入的savedCartId映射到cartId变量：

export const addItemToCart = async ({ itemId, savedCartId: cartId, quantity }) => {
    console.log(`Item Id: ${itemId}`)
    console.log(`Cart Id: ${cartId}`) // 现在能正确拿到值了
    console.log(`Quantity: ${quantity}`)

    try {
      const shopifyResponse = await postToShopify({
        query: `/* 原有查询内容不变 */`,
        variables: {
            cartId, // 这里依然用cartId，不需要修改
          lines: [
            {
              merchandiseId: itemId,
              quantity,
            },
          ],
        },
      });
  
      return shopifyResponse;
    } catch (error) {
      console.log(error);
    }
  };

修改后再测试，cartId就能正确获取到localStorage里存储的值了。

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