Firebase项目中无async的await可运行、forEach索引undefined问题求助

<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-firestore.js"></script>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-analytics.js";
import { getFirestore, collection, getDocs, addDoc } from 'https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore.js';

const firebaseConfig = { ... } //firebase config
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app);
const querySnapshot = await getDocs(collection(db, "location")); 
console.log(querySnapshot)
querySnapshot.forEach((doc, index) => { 
  // do something with doc
  // index always returns undefined!
})
</script>

首先注意代码存在一个基础隐患：同时引入了8.2.6和9.0.2两个大版本的Firebase SDK，会导致严重的运行时冲突，是异常行为的核心诱因之一，建议先删除前两行8.x版本的SDK引入，统一使用9.x模块化版本。

问题1：await未被async函数包裹却可以正常运行 #

原因是你使用了type="module"标记脚本，ES模块支持顶层await特性，该特性在ES2022被纳入正式标准，允许在模块顶层作用域直接使用await关键字，无需嵌套在async函数内部，只要运行环境支持ES模块该写法就是合法的，不会抛出语法错误。

问题2：遍历querySnapshot时index参数始终返回undefined #

有两个直接诱因：

• 版本冲突导致调用了旧版实现：8.x版本的Firebase Firestore的QuerySnapshot的forEach方法回调仅接收文档快照单个入参，不会传入索引值，双版本冲突下你拿到的QuerySnapshot很可能是8.x版本的实例，因此index为undefined。
• Firestore自定义实现与数组forEach的差异：即使统一使用9.x版本，Firestore的QuerySnapshot的forEach也不是原生数组方法的实现，索引参数的兼容性不稳定。

解决方案是先统一SDK版本，再将QuerySnapshot转为普通数组后遍历：

const docList = Array.from(querySnapshot.docs)
docList.forEach((doc, index) => {
  // 此处index可正常获取
})

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