使用原生JavaScript将结账后库存数据Patch到Firebase的问题

我开发了一个结合localStorage与Firebase的简易网店，希望在结账后更新Firebase中的库存（lager）数据。点击结账按钮时，通过Patch请求提交新的库存数据。目前控制台已能显示计算后的新库存，但无法将其Patch到Firebase，Firebase中的库存未得到更新。

//结账逻辑
function checkout(id){
        let cartItemsObj = localStorage.getItem('productsInCart')
        cartItemsObj = JSON.parse(cartItemsObj)
        
        let cartArray = Object.values(cartItemsObj)
        console.log(cartArray )
        let index = ''
        cartArray.map((item) =>{
          index= item.id
          console.log('DATA OBJ ID', index)
        })
       
      
        
  //index 是 undefined
  async function patchPost(obj){
    const baseURL = `https://webstore-22fa4-default-rtdb.europe-west1.firebasedatabase.app/`
    const url = baseURL + `Products${index}.json`
        const init = {
            method: 'PATCH',
            body: JSON.stringify(obj),
            headers: {
                "Content-type": "application/json; charset=UTF-8",
            }
        };
    
        const response = await fetch(url, init)
        const data = await response.json()
        console.log(data)
        
    }
    
    let obj = cartArray.map(item =>{
      let newLager = item.lager - item.inCart
      console.log(newLager)
      if(item.id === id){
      }
        return{
        
          lager: newLager
        }
      
    })  
 
    // let obj = cartArray.reduce(function(acc, cur, ndex) {
    //   acc[ndex] = cur;
    //   return acc[ndex];
    // }, {});

    patchPost(obj)
    console.log(obj)
   
    
  }

控制台报错截图：

1. 核心问题 #

从报错和代码逻辑来看，有两个致命问题：

• URL路径错误：Products${index}.json缺少斜杠，Firebase无法识别正确的商品节点路径，导致请求地址无效。
• 提交数据格式错误：cartArray.map返回的是数组，但Firebase Realtime Database的PATCH请求要求传入对象格式数据，且当前逻辑错误地将所有商品的库存更新包装成数组提交，不符合API要求。

2. 修复后的完整代码 #

//结账逻辑
async function checkout(id){
    let cartItemsObj = localStorage.getItem('productsInCart')
    cartItemsObj = JSON.parse(cartItemsObj)
    
    let cartArray = Object.values(cartItemsObj)
    console.log(cartArray)

    // 封装单个商品库存更新请求
    async function updateProductStock(productId, newStock) {
        const baseURL = `https://webstore-22fa4-default-rtdb.europe-west1.firebasedatabase.app/`
        // 修复URL路径，添加斜杠分隔Products和商品ID
        const url = baseURL + `Products/${productId}.json`
        const init = {
            method: 'PATCH',
            // 直接传入单个库存更新的对象，而非数组
            body: JSON.stringify({ lager: newStock }),
            headers: {
                "Content-type": "application/json; charset=UTF-8",
            }
        };

        const response = await fetch(url, init)
        const data = await response.json()
        console.log(`商品${productId}库存更新结果:`, data)
    }

    // 遍历购物车商品，逐个更新库存
    for (const item of cartArray) {
        let newLager = item.lager - item.inCart
        console.log(`商品${item.id}新库存:`, newLager)
        await updateProductStock(item.id, newLager)
    }
}

3. 关键优化点 #

• 修正URL路径，添加/分隔Products节点和商品ID，确保Firebase能定位到正确的商品数据。
• 把checkout改为异步函数，用await确保每个库存更新请求完成后再处理下一个，避免并发请求冲突。
• 移除无用的index变量和空判断，简化逻辑，直接遍历购物车商品发起单个更新请求。

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