Firebase Firestore详情页无法获取文档数据求助

问题根源分析 #

• 组件初始化时model.event设为数组[]，数组在JavaScript中属于真值，导致if (!event)判断永远不执行，根本不会触发数据加载逻辑。
• 异步获取数据后更新了model，但没有触发组件的重新渲染，数据更新后页面无法自动刷新。
• getById方法存在冗余的双重await，虽不影响功能但代码不够简洁。

修复步骤 #

1. 修正初始值与判断逻辑 #

将model.event的初始值改为null，这样初始状态下!event为真，能正常触发数据加载：

constructor() {
  super({
    name: 'event',
    model: {
      event: null, // 替换原数组初始值为null
    },
    routerPath: '/event/:id',
  });
  this.eventLoaded = false;
}

2. 触发组件重新渲染 #

异步获取数据后，需要手动触发组件重渲染并更新DOM（假设你的Component基类没有内置自动更新机制）：

loadEvent(id) {
  if (!this.eventLoaded) {
    this.eventLoaded = true;
    Events.getById(id).then((data) => {
      this.model.event = data;
      // 重新渲染并替换当前组件的DOM元素
      const newElement = this.render();
      this.element.replaceWith(newElement);
      this.element = newElement; // 更新组件的DOM引用
    });
  }
}

3. 简化getById方法 #

去掉冗余的双重await，代码更简洁直观：

getById: async (id) => {
  const db = firebase.firestore();
  const docSnapshot = await db.collection('events').doc(id).get();
  return docSnapshot.data();
}

4. 完善详情页渲染逻辑 #

添加加载状态提示，同时做容错处理避免无标题时页面异常：

render() {
  const { event } = this.model;
  const eventContainer = document.createElement('div');

  if (!event) {
    this.loadEvent(this.props.id);
    eventContainer.innerHTML = '加载中...'; // 添加加载提示
  } else {
    eventContainer.appendChild(
      Elements.createHeader({
        textContent: event.title || '无标题', // 容错处理
      }),
    );
  }
  return eventContainer;
}

额外优化建议 #

• 列表页的loadEvents同样存在异步更新model后不触发重渲染的问题，建议添加相同的重渲染逻辑，避免初始加载时显示“无事件”后无法更新列表。
• 处理文档不存在的场景：在getById中检查文档是否存在，返回null以便详情页提示用户：

getById: async (id) => {
  const db = firebase.firestore();
  const docSnapshot = await db.collection('events').doc(id).get();
  if (!docSnapshot.exists) {
    return null; // 文档不存在时返回null
  }
  return docSnapshot.data();
}

然后在详情页的render方法中补充判断：

} else if (event === null) {
  eventContainer.innerHTML = '该事件不存在';
} else {
  // 渲染事件标题
}

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