Javascript 无法设置属性'；innerText'；尝试将数据从firebase写入标头元素时，返回null

要作出反应，请执行以下操作：

未捕获的TypeError:无法将属性“innerText”设置为null

尝试将数据从firebase写入标头时

export default function Deposits() {
 const classes = useStyles();

 const preName = document.getElementById("userNm");

 const dbRefObject = firebase.database().ref().child('Users');
 const dbNameObject = dbRefObject.child('name');

 dbRefObject.on('value', snap=> {preName.innerText = 
 JSON.stringify(snap.val(), null)});
 dbNameObject.on('child_added', snap => console.log(snap.val()));



 return (
   <React.Fragment>
    <h2 id="userNm"> </h2>
    <Typography id="number"  variant="h4"style={{textAlign: "center",}}>
     NUMBER HERE
    </Typography>
    <Typography id="grade" className={classes.depositContext} style= 
      {{textAlign: "center",}}>
       GRADE HERE
    </Typography>

</React.Fragment>
);
}

导出默认功能存款（）{
const classes=useStyles（）；
const preName=document.getElementById（“userNm”）；
const dbreObject=firebase.database（）.ref（）.child（'Users'）；
const dbNameObject=dbreObject.child（'name'）；
DbreObject.on（'value'，snap=>{preName.innerText=
stringify（snap.val（），null）}；
dbNameObject.on（'child_added'，snap=>console.log（snap.val（））；
返回(
这里的号码
在这里分级
);
}

---

我希望firebase DB中“name”下的名称显示为标题，但它是空的。

您不能简单地使用React中的

getElementById

访问元素。您需要使用

React.createRef（）

const preName=React.createRef（）；
const dbNameObject=dbreObject.child（'name'）；
dbreObject.on（'value'，snap=>{preName.current.innerText=JSON.stringify（snap.val（），null）}）；
返回(
...
...
)

---

但是我建议您使用

state

而不是Ref.

与React一起使用，您应该使用

{this.state.name}

然后使用

this.setState（{name:some_value}）或类似的钩子。你是冠军：）谢谢你，我已经在这上面呆了一段时间了。