添加方法“ FirestoreConnect”时出现错误

Question

我正在创建一个小型React Native应用程序，当我添加一些代码以将组件与Firebase连接时，它向我显示此错误：

  

不变违规：渲染未返回任何内容。这通常意味着缺少return语句。或者，要不显示任何内容，请返回null。

代码：

import React from 'react';
import { StyleSheet, Text, View, TextInput,
       Keyboard, KeyboardAvoidingView, FlatList, TouchableOpacity, Image} from 'react-native';

import { connect } from 'react-redux';
import { compose} from 'redux';
import { firestoreConnect } from 'react-redux-firebase';

import {addChat, deleteChat} from '../src/actions/chat_action';

class SettingsScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat Screen',
  };
   state = {
       chat_input: "",
   }

   onNewChat = () => {

       this.props.addChat(
           this.state.chat_input
       )
       this.setState({
           chat_input: ""
       });
       Keyboard.dismiss();
   }

   renderItem = ( {item} ) => {
       return (
           <View style={styles.row}>
               <Text style={styles.message} >{item.msg}</Text>
               <TouchableOpacity
                  style={styles.button}
                  onPress={this.props.deleteChat(item.id)}
                >
                  <Image
                    source={require('../assets/images/trash2.png')}
                    fadeDuration={0}
                    style={{width: 20, height: 20}}
                  />
                </TouchableOpacity>
           </View>
       );
   }

  render() {
    const { thread } = this.props || []

       if (!thread) {
           return 
            <View style={styles.container}>
                <Text>Loading...</Text>
            </View>
       }
    return ( 
       <View style={styles.container}>
               <FlatList
                   data={thread}
                   renderItem={this.renderItem}
                   inverted
                   keyExtractor={(item, index) => index.toString()}  
               />
               <KeyboardAvoidingView behavior="padding">
                   <View style={styles.footer}>
                       <TextInput
                           value={this.state.chat_input}
                           onChangeText={text => this.setState({ chat_input: text })}
                           style={styles.input}
                           underlineColorAndroid="transparent"
                           placeholder="Type something nice"
                       />
                       <TouchableOpacity onPress={this.onNewChat.bind(this)}>
                           <Text style={styles.send}>Send</Text>
                       </TouchableOpacity>
                   </View>
               </KeyboardAvoidingView>
           </View>
    );
  }
}
const mapStateToProps = (state) => {
 return {
   //thread: state.chatReducer.thread,
   thread: state.firestore.ordered.chat 
 }
}
const mapDispatchToProps = (dispatch) => {
 return {
   addChat: (newChat) => dispatch(addChat(newChat)),
   deleteChat: (id) =>dispatch(deleteChat(id)),
 }
}

//export default connect(mapStateToProps, mapDispatchToProps) (SettingsScreen)
export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   firestoreConnect([
       { collection: 'chat'},
   ]))(SettingsScreen);

错误：

预先感谢您的帮助。