跟随Firebase教程遇[DEFAULT]应用未初始化错误及Django渲染异常

一、解决Firebase版本兼容问题 #

FirebaseUI目前仅兼容Firebase v8及以下的命名空间版本（非v9模块化版本），你按官方教程操作仍出问题，大概率是SDK引入版本错误或初始化代码写法不对。

正确的SDK引入方式（必须用v8兼容版） #

在Django模板的<head>中引入对应CDN资源，禁止混用v9模块化导入：

<!-- Firebase v8 核心SDK -->
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<!-- FirebaseUI 库及样式 -->
<script src="https://www.gstatic.com/firebasejs/ui/4.8.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.1/firebase-ui-auth.css" />

注：版本号可选用FirebaseUI支持的最新v8稳定版，上述版本为经过验证的可用版本

正确的Firebase初始化代码 #

采用v8命名空间写法，将代码完整放入<script>标签内，避免直接暴露配置文本（这也是Django渲染成纯文本的原因之一）：

<script>
  // 从Firebase控制台复制的应用配置
  var firebaseConfig = {
    apiKey: "你的API_KEY",
    authDomain: "你的AUTH_DOMAIN",
    projectId: "你的PROJECT_ID",
    storageBucket: "你的STORAGE_BUCKET",
    messagingSenderId: "你的MESSAGING_SENDER_ID",
    appId: "你的APP_ID"
  };
  // 初始化默认Firebase应用
  firebase.initializeApp(firebaseConfig);

  // 初始化FirebaseUI实例
  var ui = new firebaseui.auth.AuthUI(firebase.auth());
  var uiConfig = {
    signInSuccessUrl: '/登录成功跳转路径/',
    signInOptions: [
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
      // 可添加Google、Facebook等其他登录方式
    ]
  };
  // 将登录UI渲染到指定DOM容器
  ui.start('#firebaseui-auth-container', uiConfig);
</script>

二、修复Django渲染时配置显示为纯文本的问题 #

该问题源于Django模板引擎误解析配置代码中的特殊符号（如{{ }}），或代码未被包裹在<script>标签内导致直接输出。

正确的模板写法 #

1. 确保Firebase相关<script>代码完整放置在模板的<head>或<body>区域，不要拆分。
2. 若配置代码包含{{ }}等模板变量符号，用{% verbatim %}标签包裹初始化代码，避免Django解析：

<script>
{% verbatim %}
  var firebaseConfig = {
    apiKey: "你的API_KEY",
    authDomain: "你的AUTH_DOMAIN",
    // 其他配置项
  };
  firebase.initializeApp(firebaseConfig);
  // FirebaseUI初始化代码
{% endverbatim %}
</script>

3. 页面中需保留用于渲染登录框的DOM容器：

<div id="firebaseui-auth-container"></div>

三、验证步骤 #

1. 清空浏览器缓存后重新加载页面，检查控制台是否还存在no-app错误。
2. 查看页面源代码，确认Firebase初始化代码是完整的<script>标签内容，而非纯文本。
3. 确认#firebaseui-auth-container元素存在且未被CSS隐藏。

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