JavaScript循环获取Firestore字段异常：如何正确拼接字段名？

你踩了个JavaScript对象属性访问的常见坑——用点语法（.）没法动态拼接属性名！data.videolink+i会被JS当成先取data.videolink（你数据库里根本没这个字段，所以是undefined），再和i相加，结果自然是NaN，Firestore当然找不到对应的字段。

解决方法很简单，改用方括号语法访问属性，这样就能把拼接好的字符串作为属性名动态取值。另外你循环条件还写错了，i == videocount只会让循环执行一次，得改成i <= videocount才能遍历所有3个链接。

修改后的完整代码如下：

if (doc.exists) { 
  const data = doc.data(); // 把data提取到循环外，不用重复调用
  for (let i = 1; i <= videocount; i++) { // 修正循环条件
    // 用模板字符串拼接属性名，或者用data['videolink' + i]也可以
    const videolink = data[`videolink${i}`]; 
    // 可选：加个判断，避免字段不存在时显示空内容
    if (videolink) {
      const p = `<p class="trackvideostyle">Your Video Link : ${videolink}</p>`; 
      document.getElementById("btn").insertAdjacentHTML('beforebegin', p); 
    }
  }
}

额外提两个小优化：

• 把doc.data()放到循环外面，避免每次循环都重复读取文档数据，小细节但能提升性能
• 加个if (videolink)的判断，如果某个videolinkN字段不存在（比如只存了2个链接），就不会在页面上生成空的段落

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