如何将Firebase Storage文件夹文件展示到WordPress？已配置SDK但无效果

我希望在WordPress页面中展示Firebase Storage内的文件，允许用户访问、预览并下载这些文件。但按以下步骤操作后页面没有任何反应：

1. 在模板页面添加了HTML和JavaScript代码
2. 入队了Firebase相关脚本

现有代码 #

模板页面代码 #

<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
        <section class="firebase-file-list">
                <h2>Liste des Fichiers Firebase</h2>
                <ul id="firebase-files-list">
                        <!-- Les fichiers seront affichés ici automatiquement via JavaScript -->
                </ul>
        </section>
  </main>
 </div>

<script>
    // Your Firebase configuration here
 const firebaseConfig = {
 apiKey: "XXXXXXXXX",
authDomain: "XXXXXXXXX",
projectId: "XXXXXXXXX",
storageBucket: "XXXXXXXXXX",
messagingSenderId: "XXXXXXXXXXX
appId: "XXXXXXXXXX",
measurementId: "XXXXXXXXXX"
 };

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Use Firebase services with the global 'firebase' object
const storage = firebase.storage();
const storageRef = storage.ref('folder-name');
const filesList = document.getElementById('firebase-files-list');

storageRef.listAll().then((res) => {
res.items.forEach((item) => {
    // Créez un élément <li> pour chaque fichier et ajoutez-le à la liste
    const listItem = document.createElement('li');
    const fileLink = document.createElement('a');
    item.getDownloadURL().then((url) => {
        fileLink.href = url; // Lien de téléchargement du fichier
        fileLink.textContent = item.name; // Nom du fichier
        listItem.appendChild(fileLink);
        filesList.appendChild(listItem);
    });
});
 }).catch((error) => {
console.error('Erreur lors de la récupération de la liste des fichiers :', error);
    });
</script>

脚本入队代码 #

wp_register_script('firebase-app', 
  'https://www.gstatic.com/firebasejs/10.3.1/firebase-app.js', array(), '10.3.1', true); 
wp_enqueue_script('firebase-app'); 

wp_register_script('firebase-storage', 'https://www.gstatic.com/firebasejs/10.3.1/firebase-storage.js', array(), '10.3.1', true); 
wp_enqueue_script('firebase-storage'); 

问题排查与修复方案 #

1. 修正脚本依赖关系 #

firebase-storage必须依赖firebase-app才能正常加载，否则会触发firebase is not defined错误。修改入队代码，添加依赖参数：

wp_register_script('firebase-app', 
  'https://www.gstatic.com/firebasejs/10.3.1/firebase-app.js', array(), '10.3.1', true); 
wp_enqueue_script('firebase-app'); 

// 添加firebase-app作为依赖，确保加载顺序正确
wp_register_script('firebase-storage', 'https://www.gstatic.com/firebasejs/10.3.1/firebase-storage.js', array('firebase-app'), '10.3.1', true); 
wp_enqueue_script('firebase-storage'); 

2. 确保代码在DOM加载完成后执行 #

原代码直接放在模板中，可能在目标DOM元素（firebase-files-list）加载前就执行，导致无法获取元素。将代码包裹在DOM加载事件中：

document.addEventListener('DOMContentLoaded', function() {
    // Your Firebase configuration here
    const firebaseConfig = {
        apiKey: "XXXXXXXXX",
        authDomain: "XXXXXXXXX",
        projectId: "XXXXXXXXX",
        storageBucket: "XXXXXXXXXX",
        messagingSenderId: "XXXXXXXXXXX", // 补全闭合引号和逗号
        appId: "XXXXXXXXXX",
        measurementId: "XXXXXXXXXX"
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

    // Use Firebase services with the global 'firebase' object
    const storage = firebase.storage();
    const storageRef = storage.ref('folder-name');
    const filesList = document.getElementById('firebase-files-list');

    storageRef.listAll().then((res) => {
        res.items.forEach((item) => {
            const listItem = document.createElement('li');
            const fileLink = document.createElement('a');
            item.getDownloadURL().then((url) => {
                fileLink.href = url;
                fileLink.textContent = item.name;
                fileLink.setAttribute('target', '_blank'); // 新增：打开预览窗口
                listItem.appendChild(fileLink);
                filesList.appendChild(listItem);
            }).catch(err => {
                console.error('获取下载链接失败:', err);
            });
        });
    }).catch((error) => {
        console.error('获取文件列表失败:', error);
    });
});

3. 修正Firebase配置语法错误 #

原配置中messagingSenderId字段缺少闭合引号和逗号，导致JSON解析失败，直接阻止Firebase初始化。修正后如上代码所示。

4. 检查Firebase Storage安全规则 #

如果上述修正后仍无反应，大概率是存储桶权限问题。默认规则禁止公开访问，需调整规则允许读取：
进入Firebase控制台 → Storage → 规则，修改为：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if true; // 临时允许所有用户读取，生产环境需限制权限
      allow write: if request.auth != null;
    }
  }
}

注意：生产环境请勿使用if true，建议根据需求设置权限（比如仅登录用户访问、特定路径公开等）。

5. 查看浏览器控制台错误 #

按F12打开开发者工具，切换到Console标签页，查看是否有报错信息（如权限错误、未定义变量等），这些信息能直接定位问题。

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