Cloud Firestore获取文档字段显示undefined问题求助

尝试将Cloud Firestore中的数据获取到HTML页面时，能正常接收文档列表并打印文档ID，但访问文档内字段始终显示undefined。

相关代码如下：

<script type="module">
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-app.js'
import { getFirestore, collection, getDocs} from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-firestore.js'

const firebaseConfig = {........};

const app = initializeApp(firebaseConfig);
const firestore = getFirestore(app);        
const rows = [];

const fetchRows = async () => {
    try {
        const querySnapshot = await getDocs(collection(firestore, "pdf"));
        querySnapshot.forEach((doc) => {
            var fields = doc.data;
            //console.log(fields);
            rows.push({
                id : doc.id,
                title : fields.subject,
                link : fields.link
            });
        });
        //console.log(rows);
    }
    catch {
        alert("Notice Download Failed.");
        console.log(error);
    }
}

fetchRows();
</script>

打印fields时输出：

data(e={}){return super.data(e)}
data(e={}){return super.data(e)}
data(e={}){return super.data(e)}
data(e={}){return super.data(e)}
data(e={}){return super.data(e)}
data(e={}){return super.data(e)}
data(e={}){return super.data(e)}

打印rows中的元素示例：

{id: '59TnR43fxDSaQf69BbZW', title: undefined, link: undefined}

核心问题 #

你错误地将doc.data当作属性访问，但实际上data()是Firestore文档对象的方法，必须通过调用它（加括号）才能获取文档的字段数据。

修正后的代码 #

修改fetchRows函数中的核心逻辑：

const fetchRows = async () => {
    try {
        const querySnapshot = await getDocs(collection(firestore, "pdf"));
        querySnapshot.forEach((doc) => {
            // 调用data()方法获取字段数据
            var fields = doc.data();
            rows.push({
                id : doc.id,
                title : fields.subject,
                link : fields.link
            });
        });
        console.log(rows);
    }
    // 接收error参数，避免console.log报错
    catch (error) {
        alert("Notice Download Failed.");
        console.log(error);
    }
}

说明 #

• 调用doc.data()后，fields会正确包含文档的所有字段数据，此时访问fields.subject和fields.link就能得到对应的值。
• 同时修复了catch块未接收错误参数的问题，避免控制台出现error is not defined的额外报错。

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