tehfreak

Фаирбейс сам управляет своим вебсокет-соединением. Приложение же управляет слушателями: подписывается на обновления базы данных когда это необходимо и отписывается когда обновления больше не требуется.

Как-то так:

import { doc, onSnapshot } from 'firebase/firestore'

export default function EntitityPage({ entityId }) {

    const [ entity, setEntity ] = React.useState(null)
    
    React.useEffect(() => {
        const unsubscribe = onSnapshot(doc(db, 'entities', entityId), (snapshot) => {
            setEntity(snapshot.data())
        })
        return () => {
            unsubscribe()
        }
    }, [entityId])
    
    return (
        <div>{JSON.stringify(entity)}</div>
    )
}

Вот полная версия требуемого компонента с индикатором загрузки и обработкой ошибки:

class Lectures extends React.PureComponent {

    state = {
        lectures: null,
        lecturesError: null,
        lecturesPending: true,
    }

    async componentDidMount() {
        await this.fetchLectures()
    }

    async fetchLectures() {
        this.setState({ lectures:null, lecturesError:null, lecturesPending:true })
        try {
            const lectures = (await firebase.database().ref('lectures').once('value')).val()
            console.log(lectures)
            this.setState({ lectures, lecturesError:null, lecturesPending:false })
        } catch (lecturesError) {
            console.error(lecturesError)
            this.setState({ lectures:null, lecturesError, lecturesPending:false })
        }
    }

    render() {
        const { lectures, lecturesError, lecturesPending } = this.state
        return (
            <section>
                <h1>Лекции</h1>
                {lecturesPending && (
                    <div>Загружаются...</div>
                )}
                {lecturesError != null && (
                    <div>Не удалось загрузить: {lecturesError.message}</div>
                )}
                {lectures != null && (
                    <ul>
                        {lectures.map((lecture) => (
                            <li
                                key={lecture.id}
                            >
                                {lecture.name}
                            </li>
                        ))}
                    </ul>
                )}
            </section>
        )
    }
}

Чтобы сразу записать данные в state (в конструкторе компонента), эти данные должны быть сразу доступны, например, в props. Если необходимо выполнить асинхронную операцию и записать результат в state, то делать это нужно в componentDidMount:

class extends React.Component {
  async componentDidMount() {
    this.setState({
      data: (await dataRef.once('value')).val()
    })
  }
}