JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
	<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
  </head>
  <body>
  
    <div id="msg"></div>
	
    <script>
	
	// Initialize Firebase
	var config = {
		apiKey: "專案API金鑰號碼",
		authDomain: "專案驗證網址",
		databaseURL: "https://專案資料庫網址",
		storageBucket: "",
	};
	firebase.initializeApp(config);
	
	var recArray = [];
	var Max;
	
	readFirebase();
	
	function readFirebase(){
	  // 從Firebase先讀取counter知道總共幾筆rec資料
	  firebase.database().ref('aSetofRecords/counter').once('value').then(function(snapshot) {
		// 注意Max是整體性變數才能讓wait2showrecArray()裡面執行也能讀到這個值
		Max = snapshot.val();	
		// 逐一讀取每筆rec資料存入recArray陣列
		for (var i=1 ; i <= Max ; i++) {
		
		  firebase.database().ref('aSetofRecords/records/rec'+i).once('value').then(function(snapshot) {
			recArray.push( snapshot.val() );
			
			// 本來這裡寫了下列一行動作，要測試看看迴圈中的i值變化與recArray陣列裡的資料是否正確記錄
			// 但其實這裡無法給我們正確的資訊，你可以試著移除註解，就會看到i值並非從0開始遞增，而是超過Max值
			// 其原因應該是因為Javascript非同步執行所造成的現象，在使用其他語言習以為常的循序執行概念會被打破
			// 另外就是recArray陣列的每筆記錄好像是undefined，但把[i-1]改成一個常數像是[0]就會看到有資料
			// 這個陣列出現的詭異狀況又要如何解釋呢? 要在下一段迴圈的動作狀況一併了解，才能真正抓到問題的癥結
			document.getElementById('msg').innerHTML += "<p>第一個迴圈產出..." + i + ": " + recArray[i-1] + "</p>";
	      });
		}

		// 就算是把前述測試看看迴圈中的j值變化與srecArray陣列裡的資料是否正確記錄移出前一個迴圈之後了
		// 你會發現j值遞增變化是正常了，但recArray陣列的每筆記錄還是undefined，也就是整個陣列是空無一物
		// 這是因為Javascript非同步執行，這個迴圈執行到要讀取陣列資料的時間比前一個迴圈將資料寫入陣列還更早!
		// 因為前一個迴圈執行Firebase的once讀取資料時，需要等待該平台的回應，然後(then)才將取得的資料寫入陣列
		// 程序直接走下來到下一個迴圈讀取陣列資料的執行時間一定比較快，而等Firebase平台的回應時間一定是比較慢
		// 這樣就能理解為何後面這個迴圈要讀取recArray陣列的每筆記錄時都還是undefined，這樣解釋聽得懂吧?
		for (var j=0 ; j < Max ; j++) {
		 	document.getElementById('msg').innerHTML += "<p>第二個迴圈產出..." + j + ": " + recArray[j] + "</p>";
		}
		
		// 再度改寫了顯示recArray陣列全部資料之動作延遲執行
		// 由wait2showrecArray()裡面加上判斷是否需要對wait2showrecArray()再次延遲執行
		setTimeout(function(){wait2showrecArray();}, 500);
	
	  });
	}
	
	// While variable is not defined - wait
	// 參見...