Я получил ошибку, когда я добавляю метод "FirestoreConnect"

Question

Я создаю небольшое собственное приложение реакции, когда я добавляю некоторый код для соединения моего компонента с firebase, он показывает мне эту ошибку:

Нарушение инварианта: ничего не было возвращено из рендера. Обычно это означает, что отсутствует инструкция возврата. Или, чтобы ничего не визуализировать, верните 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);

Ошибка:

Заранее спасибо за помощь.