Javascript 使用实时Firebase数据库（Web）在无限滚动中获取空错误

所以我试图为我的实时数据库实现一个无限滚动。目前，我的代码正在一次从数据库加载所有图像（存储为引用）。因此，这真的减慢了网站的速度，而且由于所有的数据总是被传输，所以花费了我更多的钱。我尝试使用几行代码获取数据库中键的引用，以便跟踪加载的数据：

//This snippet of code does not work
var referenceToOldestKey = '';
if (!referenceToOldestKey) {
firebase.database().ref('Posts/').orderByKey().endAt(referenceToOldestKey).limitToLast(10).once('value').then((snapshot)=>{
    var arrayOfKeys = Object.keys(snapshot.val()).sort().reverse();
    var results = arrayOfKeys.map((key) => snapshot.val()[key]);
    referenceToOldestKey = arrayOfKeys[arrayOfKeys.length-1];

    //loop thru and append content here to desired div
})
}

但是，我似乎无法使此函数正常工作。我不断得到一个空引用，其中调用

var arrayOfKeys=Object.keys（snapshot.val（））.sort（）.reverse（）其中会显示“Objects”为空。我当前的代码（一次加载所有图像）可以在这里看到：

/*READ PIC & DATA FROM REALTIME- PICTURES*/

var database = firebase.database().ref().child('Posts/');
database.once('value', function(snapshot){
    if(snapshot.exists()){
        var content = '';
        var counter=0;

        snapshot.forEach(function(data){
            var url = data.val().url;
            var keyVal = data.val().keyVal;
            var dimensions = data.val().dimensions;
            var title = data.val().title;
            var year = data.val().year;
            var medium = data.val().medium;
            var additional = data.val().additional;

            content += '<div class="col-xl-4 col-xs-12 imageGrid" id="'+keyVal+'">';
            content += '<a class="lazy example-image-link" href="'+url+'" data-title="'+title+'&lt;br /&gt;'+medium+'&lt;br /&gt;'+dimensions+'&lt;br /&gt;'+year+'&lt;br /&gt;'+additional+'&lt;br /&gt;'+'" data-lightbox="example-1 '+counter+'"><img class="lazy example-image" width="300" height="200" src="'+url+'" alt="'+title+'"/></a>';
            content += '</br><button class="btn btn-danger deleteButton logged-inX" onclick="deleteFile(this)">x</button>';
            content += '<button class="btn btn-light editButton logged-inX" data-toggle="modal" data-target="#myModalUpdate" onclick="getUpdateId(this)">&#9998;</button>';
            content += '</div>';
            counter++;

        });
        $('.displayImagesFromFirebase').append(content);
            setupUI(firebase.auth().currentUser);
    }

});

您当前的尝试在哪里得到空错误？这些信息可能会帮助人们answer@Klaycon已编辑我的问题以包含空位置。谢谢，正如您所写的，错误的措辞有点不清楚，没有“对象”，而且
Object
真的不应该为空。你能粘贴准确的错误文本吗？@Klaycon当然可以，很抱歉给你带来这么多困惑。错误->“TypeError:无法将未定义或null转换为Function.key处的object”，它是
对象的行号。keys
我可以看出您在代码中缺少一个检查（snapshot.exists（））{…}是否不起作用。这会解决错误吗？我假设snapshot.val（）返回未定义的。
var referenceToOldestKey = '';
if (!referenceToOldestKey) {
firebase.database().ref().child('Posts/').orderByKey().endAt(referenceToOldestKey).limitToLast(10).once('value').then((snapshot)=>{
    if(snapshot.exists()){
    var arrayOfKeys = Object.keys(snapshot.val()).sort().reverse();
    var results = arrayOfKeys.map((key) => snapshot.val()[key]);
    referenceToOldestKey = arrayOfKeys[arrayOfKeys.length-1];

    var content = '';
    var counter=0;

    snapshot.forEach(function(data){
        var url = data.val().url;
        var keyVal = data.val().keyVal;
        var dimensions = data.val().dimensions;
        var title = data.val().title;
        var year = data.val().year;
        var medium = data.val().medium;
        var additional = data.val().additional;

        content += '<div class="col-xl-4 col-lg-6 col-md-6 col-xs-12 imageGrid" id="'+keyVal+'">';
        content += '<a class="lazy example-image-link" href="'+url+'" data-title="'+title+'&lt;br /&gt;'+medium+'&lt;br /&gt;'+dimensions+'&lt;br /&gt;'+year+'&lt;br /&gt;'+additional+'&lt;br /&gt;'+'" data-lightbox="example-1 '+counter+'"><img class="lazy example-image" width="300" height="200" src="'+url+'" alt="'+title+'"/></a>';
        content += '</br><button class="btn btn-danger deleteButton logged-inX" onclick="deleteFile(this)">x</button>';
        content += '<button class="btn btn-light editButton logged-inX" data-toggle="modal" data-target="#myModalUpdate" onclick="getUpdateId(this)">&#9998;</button>';
        content += '</div>';
        counter++;

    });
    $('.displayImagesFromFirebase').append(content);
        setupUI(firebase.auth().currentUser);

    }
    //loop thru and append content here to desired div
})
}
else{
    firebase.database().ref().child('Posts/').orderByKey().endAt(referenceToOldestKey).limitToLast(10).once('value').then((snapshot)=>{
        if(snapshot.exists()){
        var arrayOfKeys = Object.keys(snapshot.val()).sort().reverse().slice(1);
        var results = arrayOfKeys.map((key) => snapshot.val()[key]);
        referenceToOldestKey = arrayOfKeys[arrayOfKeys.length-1];

        var content = '';
        var counter=0;

        snapshot.forEach(function(data){
            var url = data.val().url;
            var keyVal = data.val().keyVal;
            var dimensions = data.val().dimensions;
            var title = data.val().title;
            var year = data.val().year;
            var medium = data.val().medium;
            var additional = data.val().additional;

            content += '<div class="col-xl-4 col-lg-6 col-md-6 col-xs-12 imageGrid" id="'+keyVal+'">';
            content += '<a class="lazy example-image-link" href="'+url+'" data-title="'+title+'&lt;br /&gt;'+medium+'&lt;br /&gt;'+dimensions+'&lt;br /&gt;'+year+'&lt;br /&gt;'+additional+'&lt;br /&gt;'+'" data-lightbox="example-1 '+counter+'"><img class="lazy example-image" width="300" height="200" src="'+url+'" alt="'+title+'"/></a>';
            content += '</br><button class="btn btn-danger deleteButton logged-inX" onclick="deleteFile(this)">x</button>';
            content += '<button class="btn btn-light editButton logged-inX" data-toggle="modal" data-target="#myModalUpdate" onclick="getUpdateId(this)">&#9998;</button>';
            content += '</div>';
            counter++;

        });
        $('.displayImagesFromFirebase').append(content);
            setupUI(firebase.auth().currentUser);

        }

    })
}