声明JS变量/对象时触发Uncaught DOMException错误排查

错误原因 #

你直接同步访问marmaInfo.result导致了这个错误。IndexedDB的所有操作都是异步的，store.get(key)返回的是IDBRequest对象，它的result属性只有在请求成功完成（触发onsuccess事件）后才会有有效值。你跳过回调直接取result时，请求还没完成，这个对象已经处于不可用状态，所以抛出DOMException。

另外原代码还有两个逻辑问题：

• 判断数据是否存在的条件错误：data.sanskrit == 0不符合需求，应该判断data是否为null（表示未查到对应记录）
• 注释掉了onsuccess回调，完全跳过了异步操作的正确处理流程

修正后的代码 #

var indexedDB = window.indexedDB;
var db;

// 打开（或创建）数据库
var open = indexedDB.open("marmaDB", 1);
console.log("open Db ...");

// 创建数据库 schema
console.log("creating schema ...");
open.onupgradeneeded = function() {
    db = open.result;
    var store = db.createObjectStore("marmasStore", {keyPath: "id"});
    store.createIndex('sanskrit', 'sanskrit', { unique: false });
};

function getObjectStore(store_name, mode) {
    var tx = db.transaction(store_name, mode);
    return tx.objectStore(store_name);
}

open.onsuccess = function() {
    console.log("open DB DONE");
    db = open.result;
    var store = getObjectStore("marmasStore", 'readwrite');
    var initialMarmaData = [
        { id: "ani_ll", sanskrit: "ani"},
    ];
    var key = $('#marmaID').val();
    console.log("key " + key );

    // 正确处理异步get请求
    var marmaInfo = store.get(key);
    marmaInfo.onsuccess = function(evt) {
        var data = evt.target.result;
        // 判断是否存在记录，不存在则写入初始数据
        if (!data) {
            console.log("record " + key + " not found, initial filling DB ...");
            var store = getObjectStore("marmasStore", 'readwrite');
            initialMarmaData.forEach((marma) => {
                var request = store.put(marma);
                request.onsuccess = (event) => {
                    console.log(event.target.result + " initial filling DB DONE");
                    // 写入完成后重新获取数据并填充表单
                    fillFormWithData(marma.id);
                };
            });
        } else {
            // 已有数据，直接填充表单
            fillFormWithData(key);
        }
    };

    marmaInfo.onerror = function(evt) {
        console.error("获取数据失败:", evt.target.error);
    };
};

// 提取表单填充逻辑，复用代码
function fillFormWithData(key) {
    var store = getObjectStore("marmasStore", 'readonly');
    var request = store.get(key);
    request.onsuccess = function(evt) {
        var data = evt.target.result;
        console.log("filling form ...");
        document.getElementById('sanskrit').value = data.sanskrit;
        console.log("filling form DONE");
    };
}

关键修正点 #

• 把所有依赖data的逻辑放到marmaInfo.onsuccess回调内部，确保异步操作完成后再处理结果
• 修正数据存在性判断逻辑：用!data判断是否未查到记录
• 提取表单填充函数fillFormWithData，避免代码重复，同时保证写入初始数据后能正确获取最新值填充表单
• 增加onerror回调处理请求失败的情况，方便排查问题

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