使用Angular获取Google Sheet数据并上传至Firebase数据库的问题

问题原因 #

你当前的写法直接将行数组强行转成普通对象存入Firestore，既不符合你定义的Field接口结构，也会导致存储的数据结构混乱，无法正常读取使用。

解决步骤 #

1. 结构化转换行数据
   将拿到的header和rows做映射，把每一行数据转换成符合Field接口的对象，这里采用按列名动态映射的方式，不需要关心Sheet列的排列顺序，后续调整列顺序也不用改代码。
2. 批量写入Firestore
   使用Firestore的批量写入能力，相比逐行写入性能更好，且操作具备原子性，要么所有数据全部写入成功，要么全部失败不会产生脏数据。

修改后的完整代码 #

把你excelData方法替换成下面的代码即可：

excelData(){
  const sf = "https://docs.google.com/spreadsheets/d/1qeCEUlVt_hnuyhnoT1wxMMSv7kZW1s4cUIRLynJ0TxQ/gviz/tq";
  this.http.get(sf,{responseType: 'text'}).subscribe(res=>{
    const data = res.toString().match(/google\.visualization\.Query\.setResponse\(([\s\S\w]+)\)/);
    if(data && data.length==2){
      const obj = JSON.parse(data[1]);
      const table = obj.table;
      // 生成列名和索引的映射表
      const headerIndex = new Map();
      table.cols.forEach((col, idx) => {
        headerIndex.set(col.label.trim(), idx);
      });
      // 初始化批量操作实例
      const batch = this.afs.firestore.batch();
      // 遍历所有行转换为Field结构
      table.rows.forEach(row => {
        const rowData = row.c.map(item => item?.v ?? '');
        const fieldItem: Field = {
          Id: rowData[headerIndex.get('Id')] as string,
          Name: rowData[headerIndex.get('Name')] as string,
          Major: rowData[headerIndex.get('Major')] as string
        };
        // 生成新文档引用：如果要使用Sheet里的Id作为Firestore文档ID，把doc()的参数改为fieldItem.Id即可
        const docRef = this.collection.doc().ref;
        batch.set(docRef, fieldItem);
      });
      // 提交批量写入请求
      batch.commit().then(() => {
        console.log('所有数据上传成功');
      }).catch(err => {
        console.error('数据上传失败：', err);
      });
    }
  });
}

注意事项 #

• 代码中headerIndex.get的键名要和你Google Sheet的实际列名完全一致，拼写、大小写都不能出错
• 上传前请确认你的Firestore安全规则已经放开了Exceldata集合的写入权限，测试阶段可以临时设置为允许所有写入，上线后再调整为对应权限
• 如果需要避免重复上传同一份数据生成重复文档，可以把文档ID设置为Sheet里的Id字段值

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