如何将Firebase Cloud Firestore数据转为Polymer Shop模板格式？

要把Firebase Cloud Firestore中的分类数据转换成和Polymer Shop原模板一致的格式，你只需要在获取Firestore文档时，确保每个对象都包含name和title这两个必填字段，具体操作如下：

1. 确认Firestore文档结构 #

首先检查你的product-categories集合中的文档，确保它们包含与模板匹配的字段：

• name: 小写、下划线分隔的标识（比如oils_and_tinctures）
• title: 友好的显示名称（比如Oils and Tinctures）

如果你的Firestore文档使用了不同的字段名（比如slug代替name，displayName代替title），需要在代码中做字段映射。

2. 修改Firestore数据获取代码 #

更新你的Firestore查询代码，在将文档数据推入categoryList时，转换为模板需要的结构：

let categoryList = [];
firebase.firestore().enablePersistence()
  .then(function() {
    var db = firebase.firestore();
    return db.collection("product-categories").where('active', '==', true).get();
  })
  .then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
      // 提取Firestore文档数据，映射为模板需要的结构
      const categoryData = doc.data();
      // 如果字段名和模板一致，直接使用；否则替换为你的实际字段名
      categoryList.push({
        name: categoryData.name, // 例如：如果你的字段是slug，就改成categoryData.slug
        title: categoryData.title // 例如：如果你的字段是displayName，就改成categoryData.displayName
      });
    });
    // 这里可以添加更新Polymer UI的逻辑，比如如果categoryList是元素属性，用set方法更新
    // 示例：如果是在Polymer元素中，this.set('categoryList', categoryList);
    console.log("转换后的分类列表：", categoryList);
  })
  .catch(function(error) {
    console.log("Error getting documents: ", error);
  });

3. 处理异步加载问题 #

注意Firestore的数据获取是异步操作，原模板中的categoryList是同步定义的，所以你需要确保在数据加载完成后再更新侧边抽屉菜单。如果是在Polymer元素中，建议将categoryList声明为元素的属性，然后在Firestore的then回调中用this.set()方法更新，这样Polymer会自动触发UI更新。

比如在Polymer元素的脚本中：

class MyShopDrawer extends Polymer.Element {
  static get properties() {
    return {
      categoryList: {
        type: Array,
        value: []
      }
    };
  }

  connectedCallback() {
    super.connectedCallback();
    this.loadCategoriesFromFirestore();
  }

  loadCategoriesFromFirestore() {
    firebase.firestore().enablePersistence()
      .then(() => firebase.firestore())
      .then(db => db.collection("product-categories").where('active', '==', true).get())
      .then(querySnapshot => {
        const categories = querySnapshot.docs.map(doc => {
          const data = doc.data();
          return {
            name: data.name,
            title: data.title
          };
        });
        this.set('categoryList', categories);
      })
      .catch(error => console.error("加载分类失败：", error));
  }
}
customElements.define('my-shop-drawer', MyShopDrawer);

这样修改后，你的侧边抽屉菜单就能正确展示从Firestore获取的分类列表了。

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