Reactjs 简单盖茨比网站中的基本firestore获取请求问题

我创建了一个简单的get请求，但我不确定该怎么做，因为它请求了一个密钥。这是我的代码的简化版本：

import React, { Component, useEffect } from 'react';
import firebase from "gatsby-plugin-firebase";

var db = firebase.firestore();

var word1 = db.collection("menue").doc("word1");

 class newMenue extends Component {


     constructor(props) {
         super(props)    
         this.state = {
              wordOne: "",            
         }
     }

    render() {

        word1.get()
        .then(doc => {
          if (!doc.exists) {
            console.log('No such document!');
          } else {
            console.log('Document data:', doc.data());
            this.setState({
                wordOne: doc.data()
            }) 
          }
        })
        .catch(err => {
          console.log('Error getting document', err);
        });


        return (
            <div>
                 <h2 >{this.state.wordOne}</h2>
                 <br/> 

                         <br/>
<h5>4 Slices of grilled Cypriot Halloumi</h5>
        </div>
        )

        }
    }

export default newMenue

这就是开发工具所说的

错误：对象作为子对象无效。找到：具有键的对象 {1}。如果要呈现子对象集合，请使用数组 相反

如何添加按键以显示信息

---

具体地说，我正在尝试为我朋友的汉堡店建立一个网站，他可以自己在网站上输入菜单更改，我被困在最后一点。

您正在尝试渲染一个对象：

{this.state.wordOne}//哪个是{One:hi}

您需要渲染对象的属性：

<h2>{this.state.wordOne.One}</h2>

---

您正在尝试渲染对象：

{this.state.wordOne}//哪个是{One:hi}

您需要渲染对象的属性：

<h2>{this.state.wordOne.One}</h2>

---

这个.state.wordOne的价值是什么？这个.state.wordOne的价值是什么？这很痛苦simple@AlexanderHemming没问题，像这样简单的东西总是让我着迷。如果你不介意的话，把答案标为正确！这是痛苦的simple@AlexanderHemming没问题，像这样简单的东西总是让我着迷。如果你不介意的话，把答案标为正确！