如何修复TypeError: Cannot read properties of null (reading '')及Firebase订单数据丢失

一、解决TypeError: Cannot read properties of null (reading '') #

这个错误是由于**order变量为null/undefined时直接访问其属性**导致的，修复方式如下：

1. 前置空值校验 #

在editOrder函数开头添加校验，避免空值进入后续逻辑：

const editOrder = (e, id) => {
  e.preventDefault();
  // 先判断order是否存在
  if (!order) {
    toast.error("订单数据不存在，无法编辑");
    return;
  }
  setIsLoading(true);
  // ...后续原有代码
};

2. 初始化默认值 #

如果使用useState管理order，初始化时设为空对象而非null，避免初始状态触发错误：

const [order, setOrder] = useState({});

3. 可选：使用可选链操作符 #

对所有order属性访问添加?.，即使order为空也不会抛出错误：

const orderConfig = {
  userID: order?.userID,
  userEmail: order?.userEmail,
  orderDate: order?.orderDate,
  // ...其他属性
};

二、修复Firebase订单数据消失问题 #

数据消失的核心原因是**setDoc默认会替换整个文档**：当order为空时，生成的orderConfig多数属性为undefined，执行setDoc会直接覆盖原有订单数据，导致原内容丢失。

修复方案： #

1. 仅更新需要修改的字段，开启合并模式
   不需要传递所有订单属性，只传要修改的orderStatus和editedAt，并添加{ merge: true }参数，确保只更新指定字段，保留原有数据：

try {
  // 只提交需要修改的字段，合并到原文档
  setDoc(doc(db, "orders", id), {
    orderStatus: status,
    editedAt: Timestamp.now().toDate()
  }, { merge: true });

  setIsLoading(false);
  toast.success("订单状态修改成功");
  navigate("/adminorders");
} catch (error) {
  // ...原有错误处理
}

2. 加强参数校验
   确保id和status也有效，避免无效更新：

if (!order || !id || !status) {
  toast.error("订单信息或状态无效，无法编辑");
  return;
}

三、Firebase数据恢复方法 #

如果数据已经丢失，可以通过以下方式尝试恢复：

1. 利用Firestore版本历史 #

• 打开Firebase控制台，进入Firestore数据库，找到orders集合
• 点击被覆盖/删除的文档，切换到版本历史标签页
• 选择数据丢失前的历史版本，点击「恢复」即可还原文档内容（Firestore默认保留30天的版本记录）

2. 从备份导入（如果有开启） #

• 如果之前配置了Firestore自动备份（关联Google Cloud Storage），可以进入Cloud Storage找到备份文件，通过Firebase控制台的「导入」功能恢复数据

3. 手动恢复（有旧数据快照时） #

如果保留了旧订单的本地缓存、用户提交记录等，可以写临时脚本将数据重新写入Firestore：

// 示例：假设oldOrders是旧订单数组，包含完整订单数据
oldOrders.forEach(async (orderData) => {
  await setDoc(doc(db, "orders", orderData.id), orderData, { merge: true });
});

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