使用DataTables加载Firebase数据时遇Invalid JSON response错误求助

你遇到的问题根源有两个：

1. 异步逻辑处理错误：GetAllDataRealtime是async函数，调用后返回的是Promise对象而非预期的JSON字符串；且onSnapshot的回调内部return无法将值传递到外层函数，因为它是异步监听回调。
2. DataTables配置误用：你错误使用了ajax.data字段，该字段用于给AJAX请求传递参数，而非直接传入本地数据；当已有本地数据时，应直接使用DataTables的data选项，或在数据获取后更新表格。

修正后的代码 #

JavaScript代码 #

// 引入Firebase核心模块（需确保配置正确）
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
import { getFirestore, collection, onSnapshot } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js";

// 填入你的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的SENDER_ID",
  appId: "你的APP_ID"
};

// 初始化Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

let table;

// 页面加载完成后初始化空表格
$(document).ready(function () {
  table = $("#test").DataTable({
    columns: [
      { data: "Number" },
      { data: "First_Name" },
      { data: "Last_Name" },
      { data: "Rings" },
      { data: "Floor" },
      { data: "Pommel" },
      { data: "H_Bar" },
      { data: "P_Bars" },
      { data: "Vault" },
    ],
  });

  // 实时监听Firebase数据变化，更新表格
  const dbRef = collection(db, "Gymnasts");
  onSnapshot(dbRef, (querySnapshot) => {
    const gymnasts = [];
    querySnapshot.forEach((doc) => {
      gymnasts.push(doc.data());
    });
    // 清空旧数据、添加新数据并重新渲染
    table.clear().rows.add(gymnasts).draw();
  });
});

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test</title>

    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.css"
    />
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.js"></script>
    <!-- module脚本需在jQuery和DataTables之后加载 -->
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <table id="test" class="display" style="width: 100%">
      <thead>
        <tr>
          <th>Number</th>
          <th>First_Name</th>
          <th>Last_Name</th>
          <th>Rings</th>
          <th>Floor</th>
          <th>Pommel</th>
          <th>H_Bar</th>
          <th>P_Bars</th>
          <th>Vault</th>
        </tr>
      </thead>
    </table>
  </body>
</html>

关键修正说明 #

• 移除无效的async函数：onSnapshot是实时监听API，无需用async函数包裹，直接在页面初始化后设置监听即可。
• 表格实时更新逻辑：先初始化空表格，当Firebase数据更新时，通过clear()清空旧数据、rows.add()插入新数据、draw()重新渲染，实现数据实时同步。
• 避免Promise误用：不再试图直接获取异步函数的返回值，而是在数据回调中直接操作表格，符合异步逻辑的处理规范。

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