Javascript 主页（…）：渲染未返回任何内容。这通常意味着缺少返回语句。或者，要不呈现任何内容，请返回null

我想将所有

文档

存储在firebase中。如果有超过0个文档，则渲染

1

，否则打印

未找到文档

，但这会导致错误：

render() {
    firebase
      .firestore()
      .collection("users")
      .doc(localStorage.getItem("ph"))
      .collection("chat")
      .get()
      .then(d => {
        this.dt = d.docs.length;
        if (this.dt > 0) {
          return <div>1</div>;
        } else {
          return (
            <div>
              <div className="app-noFoundArea">
                <img src={noFound} />
              </div>
              <div className="app-noFound-title">
                <p>
                  No chat found. Try create using{" "}
                  <button className="app-add-icon app-nofound">
                    <i className="material-icons">add</i>
                  </button>
                </p>
              </div>
            </div>
          );
        }
      })
      .catch(e => {});
  }

render（）{
火基
.firestore（）
.收集（“用户”）
.doc（localStorage.getItem（“ph”））
.收藏（“聊天”）
.get（）
.然后（d=>{
this.dt=d.docs.length；
如果（该值为0.dt>0）{
返回1；
}否则{
返回(

找不到聊天室。请尝试使用{“”}创建聊天室
添加

);
}
})
.catch（e=>{}）；
}

您必须返回firebase函数内部的响应

render() {
return (
<div>
  {
    firebase.firestore().collection("users").doc(localStorage.getItem("ph")).collection("chat").get()
        .then((d) => {
            this.dt = d.docs.length;
            if (this.dt>0 ) {
              return (<div>1</div>)
            } else {
              return (
                <div>
                  <div className="app-noFoundArea">
                      <img src={noFound}></img>
                  </div>
                  <div className="app-noFound-title">
                      <p>No chat found. Try create using <button className="app-add-icon app-nofound"><i className="material-icons">add</i></button></p>
                  </div>
                </div>
            )
          }
      })
      .catch((e) => {
      })    
  }
</div>
 )
}

render（）{
返回(
{
firebase.firestore（）.collection（“users”）.doc（localStorage.getItem（“ph”））.collection（“chat”）.get（）
。然后（（d）=>{
this.dt=d.docs.length；
如果（此.dt>0）{
报税表（1）
}否则{
返回(
未找到聊天记录。请尝试使用添加创建

)
}
})
.catch（（e）=>{
})    
}
)
}

您将组件和JS代码混合在一起，如果它属于

catch

函数，那么它将不会返回任何内容

组件中的render方法始终希望返回有效的HTML结构

您可以尝试在代码中进行以下修改

constructor(props) {
    super(props)
    this.state = {
     IsChatFound : false
    };
  }

  getChatInfo = () => {
   try{
        firebase.firestore().collection("users").doc(localStorage.getItem("ph")).collection("chat").get()
        .then((d) => {
            this.setState({IsChatFound :(d.docs && d.docs.length > 0)}); 
        });
    }
    catch(error){
      this.setState({IsChatFound : false}); 
    }
  }

  componentDidMount =()=>{
    this.getChatInfo();
  }


  render() {
    return (
        {this.state.IsChatFound ?
            <div>1</div>
        : <div>
            <div className="app-noFoundArea">
                <img src={noFound}></img>
            </div>
            <div className="app-noFound-title">
                <p>No chat found. Try create using <button className="app-add-icon app-nofound"><i className="material-icons">add</i></button></p>
            </div>
         </div>
        }
    )         
 }

构造函数（道具）{
超级（道具）
此.state={
IsChatFound:错误
};
}
getChatInfo=（）=>{
试一试{
firebase.firestore（）.collection（“users”）.doc（localStorage.getItem（“ph”））.collection（“chat”）.get（）
。然后（（d）=>{
this.setState（{IsChatFound:&d.docs&&d.docs.length>0）}）；
});
}
捕获（错误）{
this.setState（{IsChatFound:false}）；
}
}
componentDidMount=（）=>{
这是getChatInfo（）；
}
render（）{
返回(
{this.state.IsChatFound？
1.
: 
未找到聊天记录。请尝试使用添加创建

}
)         
}

---

现在您可以看到

render（）

方法总是返回HTML

在

render

中获取数据可能不是一个好主意，因为每次更新

状态或
道具时都会发生这种情况。它也是异步的，因此实际上不会为React to render返回任何内容

最好将firebase逻辑放在
componentDidMount
中：

class MyComponent extends React.Component {
  state = { loaded: false, docs: [] };

  componentDidMount() {
    firebase
      .firestore()
      .collection("users")
      .doc(localStorage.getItem("ph"))
      .collection("chat")
      .get()
      .then(d => {
        this.setState({ loaded: true, docs: d });
      })
      .catch(e => {
        this.setState({ loaded: true });
      });
  }

  render() {
    const { loaded, docs } = this.state;

    if (!loaded) {
      return null;
    }

    if (docs.length > 0) {
      return <div>1</div>;
    } else {
      return (
        <div>
          <div className="app-noFoundArea">
            <img src={noFound} />
          </div>
          <div className="app-noFound-title">
            <p>
              No chat found. Try create using{" "}
              <button className="app-add-icon app-nofound">
                <i className="material-icons">add</i>
              </button>
            </p>
          </div>
        </div>
      );
    }
  }
}

类MyComponent扩展了React.Component{
状态={loaded:false，docs:[]}；
componentDidMount（）{
火基
.firestore（）
.收集（“用户”）
.doc（localStorage.getItem（“ph”））
.收藏（“聊天”）
.get（）
.然后（d=>{
this.setState（{loaded:true，docs:d}）；
})
.catch（e=>{
this.setState（{loaded:true}）；
});
}
render（）{
const{loaded，docs}=this.state；
如果（！已加载）{
返回null；
}
如果（docs.length>0）{
返回1；
}否则{
返回(

找不到聊天室。请尝试使用{“”}创建聊天室
添加

);
}
}
}