引入firebase-app和firebase-database后报initializeApp未定义如何解决

错误原因 #

你引入的是Firebase 7.x版本的传统命名空间式SDK，直接调用initializeApp是Firebase 9及以上版本模块化SDK的语法，7.x版本所有API都挂载在全局firebase对象下，不存在全局暴露的initializeApp方法，所以报未定义错误。

需修改的两处代码： #

• 替换初始化Firebase的逻辑，将const app = initializeApp(firebaseConfig);改为firebase.initializeApp(firebaseConfig);
• 读取blogs数据的ref参数是字符串，需要加引号，将db.ref(blogs)改为db.ref('blogs')

修改后完整的script代码： #

<script>
  // Your web app's Firebase configuration
  const firebaseConfig = {
    apiKey: "AIzaSyDwq-CA3Fm1oYj3jLnPeeczNb9xXrKYtbo",
    authDomain: "firebasic-a87d7.firebaseapp.com",
    databaseURL: "https://firebasic-a87d7-default-rtdb.asia-southeast1.firebasedatabase.app",
    projectId: "firebasic-a87d7",
    storageBucket: "firebasic-a87d7.appspot.com",
    messagingSenderId: "701224819501",
    appId: "1:701224819501:web:69eedfd3468db6f3f511a4",
    measurementId: "G-WVEYYLK2VJ"
  };

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  const db = firebase.database();
  const blogRef = db.ref('blogs').on('value',handleSuccess,handleError);

  function handleSuccess(items){
      console.log(items);
  }

  function handleError(error){
      console.log(error);
  }
</script>

修改完成后即可正常初始化Firebase并读取数据库中的blogs数据。

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