使用单个Firestore文档中的字段更新DOM

Question

我试图将列表呈现到DOM，然后使列表元素根据单个Firestore文档的快照进行更新。

在侦听集合快照并使用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

我不确定为什么这不能按预期进行。