Angular代码中this.messages被莫名赋值修改问题排查求助

你遇到的两个问题本质都是代码写法导致的：

1. temps修改同步影响this.messages的原因
   JavaScript中对象属于引用类型，你写的temps = this.messages没有生成新的对象副本，只是让temps指向了和this.messages相同的内存地址。后续所有对temps、temps.messages的修改，本质上都是直接修改this.messages本身，不需要额外赋值操作就会同步生效。

2. 移除.sort后输出顺序变化的原因
   Firestore的collectionGroup查询默认不会按timestamp字段排序，返回的querySnapshot遍历顺序是按照集合的默认索引规则生成的。原本的.sort会把收集到的消息统一按时间戳升序重排，删掉这行代码后，数组顺序就是你遍历querySnapshot时插入元素的顺序，自然和排序后的结果不一致。

你需要先拷贝this.messages生成独立的副本，处理完副本数据后再显式赋值给this.messages即可，修正后的代码如下：

this.currentMessageSubject.subscribe(()=> {
  console.log('Refreshing messages')
  if (this.conversationId) {
    firebase.firestore().collectionGroup('conv').where("parentMessageId", "==", this.conversationId).get().then(async (querySnapshot) => {
      let temps: FirebaseMessages;
      let tempsMsgs = new Map();
      // 创建独立的对象副本，修改temps不会直接影响this.messages
      temps = {
        ...this.messages,
        messages: []
      };
      
      querySnapshot.forEach((newConvo) => {
        const thing = { id: newConvo.id, ...newConvo.data() } as FirebaseMessage;
  
        if (!tempsMsgs.has(thing.id)) {
          tempsMsgs.set(thing.id, thing)
          temps.messages.push(thing);
        }
        
      })
      temps.messages.sort(function(a,b){
        return a.timestamp.seconds - b.timestamp.seconds;
      });
      temps.messages = temps.messages.filter((message) => !!message.id)
      // 处理完成后显式更新原数据
      this.messages = temps;
    })
  }
})

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