React中从Firebase返回的单元素数组获取id值出现undefined问题

你的问题出在将数组展开为对象的方式错误：OriginalData.slice(0)返回的仍然是完整数组（slice(0)相当于复制整个数组），用对象展开符{...}处理数组时，会把数组的索引作为对象的键，所以最终得到的ConvertingToObject是{0: {data:..., id: "100"}}——这个对象本身没有id属性，只有键为0的子对象才有，直接取ConvertingToObject.id自然返回undefined。

正确的提取方式 #

直接从数组中获取第一个元素，再访问其id属性即可，以下是几种简洁写法：

1. 直接索引取值

console.log("OriginalData", OriginalData);
const firstItem = OriginalData[0];
const RetrievingID = firstItem.id;
console.log("Retrieving ID", RetrievingID);

2. 数组解构赋值

console.log("OriginalData", OriginalData);
const [firstItem] = OriginalData; // 直接解构出数组第一个元素
const RetrievingID = firstItem.id;
console.log("Retrieving ID", RetrievingID);

3. 可选链操作符（推荐，防止数组为空报错）
   如果担心数组可能为空（比如Firebase返回数据异常），可以用可选链避免报错：

const RetrievingID = OriginalData[0]?.id;
console.log("Retrieving ID", RetrievingID); // 数组为空时返回undefined，不会抛出错误

验证你的控制台输出 #

从你提供的控制台结果来看，OriginalData[0].id就是你要的"100"，以上方法都能正确获取到这个值。

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