Обновление DOM с полями из одного документа пожарного депо

Question

Я пытаюсь визуализировать список в DOM, а затем обновлять элементы списка по снимку из одного документа пожарного хранилища.

Мне удалось легко это сделать при прослушивании снимка коллекции ииспользуя функцию onChange (), однако эта функция недоступна при прослушивании одного снимка документа.

Я думал, что решил проблему с помощью следующего кода:

const detailList = document.querySelector('#detail-list');

function loadDetail(){

// Render DOM
let name = document.createElement('li');
let description = document.createElement('li');
name.textContent = 'loading...'
description.textContent = 'loading...'
name.setAttribute('id', 'name');
description.setAttribute('id', 'description');
detailList.appendChild(name);
detailList.appendChild(description);


// Listen for document snapshot and update DOM
db.collection('1003')
.doc(localStorage.getItem('headingID'))
.collection('items')
.doc(localStorage.getItem('itemID'))
.onSnapshot(doc => {
    document.getElementById('name').innerHTML = doc.data().name;
    document.getElementById('description').innerHTML = doc.data().description;

})
}

Однако при запуске выдается следующая ошибка:

app.js:194 Uncaught TypeError: Cannot read property 'name' of undefined
    at Object.db.collection.doc.collection.doc.onSnapshot.doc [as next] (app.js:194)
    at next (firebase.js:1)
    at firebase.js:1

Я не уверен, почему это не работает должным образом.