React Redux获取Firebase Realtime Database数据缺失键变null问题

核心原因 #

你遇到的是JavaScript数组本身的特性，和Redux、Firebase没有直接关系：

1. 你从Firebase拿到的原始数据本质是键为数字字符串的普通对象，不是数组，Firebase Realtime Database本身没有原生数组类型，存储时只会按键值对保存，不会自动补全空缺的数字键。
2. 你在Reducer中处理数据时，执行了「把数字键作为数组下标赋值」的操作，触发了JS数组的自动扩容规则：只要你给下标为n的数组元素赋值，数组的length属性会自动变成n+1，中间没有赋值的下标位置会被填充为空位，在序列化/Redux DevTools展示时就会显示为null。
3. 你期望的[0: {data}, 2: {data}, 3: {data}]结构在原生JS中根本不存在：JS数组是连续索引的有序列表，不支持稀疏的索引结构，只要存在索引大于1的元素，就一定会有下标1的位置，不管你有没有主动赋值。

解决方案 #

根据你的使用场景二选一即可：

• 如果你不需要按索引顺序遍历，直接把words字段存为普通对象即可，Reducer中直接赋值Firebase返回的原始对象，不要做转数组的操作。
• 如果你需要使用数组结构，可以把原对象的键值对重组成连续数组，保留原始数字键作为业务字段即可，示例代码如下：

// 假设payload是Firebase返回的原始words对象
const wordsArray = Object.entries(payload).map(([originKey, value]) => ({
  originKey: Number(originKey),
  ...value
}))

得到的数组是连续的无空位结构，同时保留了Firebase中存储的原始数字键，不会出现自动填充null的问题。

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