如何将Firebase Realtime Database中的完整引用转换为对象并修改属性键名？

我明白你的问题在哪了——你在设置state的时候不小心把snap.val()包进了一个数组里，这就导致后续处理时多了一层多余的0父级结构。咱们一步步来解决：

错误根源分析 #

首先看这段代码：

setEvents([snap.val()])

snap.val()本身就是对应数据库events节点的对象（包含所有自动生成键的event条目），你把它放进数组后，events的结构就变成了：

[
  {
    "-MmZ5gjaPgQZj58NX3Us": {...},
    "-MmZ5grbFb-6Bj5ew7Gv": {...},
    // ...其他条目
  }
]

这就是后续map操作会出现多余父级的原因。

解决方案 #

方案一：修正state存储方式，再转换数据 #

先把state初始值设为空对象，直接存储snap.val()返回的原始对象，之后再用Object.values()提取所有event条目进行转换：

const [events, setEvents] = React.useState({});

get(child(ref(getDatabase()), `events`)).then(snap => {
  if (snap.exists()) {
    setEvents(snap.val()); // 直接存储原始对象，不用数组包裹
  } else {
    setEvents({}); // 无数据时设为空对象
  }
})

// 转换为目标格式的数组
const transformedEvents = Object.values(events).map(event => ({
  title: event.txt, // 将原属性"txt"重命名为"title"
  image: event.imgUrl,
  description: event.description || '' // 处理可能缺失的description字段
}))

方案二：获取数据时直接转换为目标格式（更高效） #

如果不需要保留原始的Firebase键结构，可以在获取数据后直接转换为数组格式再存入state，避免后续重复处理：

const [events, setEvents] = React.useState([]);

get(child(ref(getDatabase()), `events`)).then(snap => {
  if (snap.exists()) {
    const rawEvents = snap.val();
    // 直接转换为目标数组
    const transformed = Object.values(rawEvents).map(event => ({
      title: event.txt,
      image: event.imgUrl,
      description: event.description || ''
    }));
    setEvents(transformed);
  } else {
    setEvents([]);
  }
})

额外需求：保留Firebase生成的键作为ID #

如果你需要保留那些自动生成的唯一键（比如作为每个event的ID），可以用Object.entries()来遍历键值对：

const transformed = Object.entries(rawEvents).map(([eventId, event]) => ({
  id: eventId, // 保留Firebase的键作为ID
  title: event.txt,
  image: event.imgUrl,
  description: event.description || ''
}));

这样处理后，你就能得到没有多余嵌套的目标数组结构了。

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