Reactjs项目中如何将Firebase数据库最新条目显示在列表顶部

核心问题说明 #

现有代码未对返回的产品列表做排序处理，且仅单次拉取数据，新增产品后无法自动更新视图，因此无法实现最新条目置顶的需求。 #

最优实现方案（推荐） #

第一步：新增产品时补充时间戳字段 #

在新增产品的逻辑中，给每个产品新增createTime字段存储当前毫秒级时间戳，后续排序更可控：

// 新增产品示例参考
addProduct = (productData) => {
  return this.database.ref('products').push({
    ...productData,
    createTime: Date.now() // 新增该字段用于排序
  })
}

第二步：修改getAllProducts函数，增加排序逻辑+实时监听 #

把单次拉取的once方法换成实时监听的on方法，数据变更自动触发更新，同时对产品列表按创建时间倒序排列：

getAllProducts = (callback) => {
  this.database
    .ref(`products`)
    // 监听数据变化，新增/修改/删除都会自动触发回调
    .on('value', async (snapshot) => {
      if (!snapshot.exists()) return callback([])
      let allProducts = Object.values(snapshot.val())
      let allKeys = Object.keys(snapshot.val())

      // 修复原代码中Promise.all返回值未接收的问题
      const processedProducts = await Promise.all(
        allProducts.map(async (item, index) => {
          // 把Firebase生成的key存入产品对象，后续操作单条数据更方便
          item.id = allKeys[index]
          const imageIds = item.images || []
          if (imageIds.length && item.coverImage) {
            const coverIndex = imageIds.indexOf(item.coverImage)
            if (coverIndex > -1) {
              const coverImg = imageIds.splice(coverIndex, 1)[0]
              imageIds.unshift(coverImg)
            }
          }
          item.images = await this.getImages(imageIds)
          return item
        })
      )
      
      // 核心排序逻辑：按创建时间倒序，最新产品排在最前面
      const sortedProducts = processedProducts.sort((a, b) => b.createTime - a.createTime)
      
      // 原有的审核过滤逻辑可以放在这里
      // const filteredProducts = sortedProducts.filter(item => item.isApproved === 1)
      callback(sortedProducts)
    })
}

// 新增取消监听方法，组件卸载时调用避免内存泄漏
offProductsListener = () => {
  this.database.ref('products').off('value')
}

第三步：修改页面调用逻辑 #

适配新的监听函数，组件卸载时主动取消监听：

useEffect(() => {
  setIsCalling(true)
  // 传入回调，数据更新时自动刷新列表
  DataBase.getAllProducts((response) => {
    console.log('Data fetched user effect', response)
    setDataList(response)
    setIsCalling(false)
  })
  // 组件卸载时清除监听
  return () => DataBase.offProductsListener()
}, [])

兼容方案（无需修改新增逻辑） #

如果不想新增createTime字段，可直接利用Firebase push方法生成的key排序：Firebase自动生成的push id自带时间顺序，越新的key字典序越大，把上述排序逻辑替换为以下代码即可：

const sortedProducts = processedProducts.sort((a, b) => b.id.localeCompare(a.id))

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