Почему у меня возникают ошибки при чтении и записи из firebase в reactjs?

Question

Когда я использую приведенный ниже код, я получаю события в моей консоли из firebase.

getEvents = () => this.db.ref('events');

this.props.firebase.getEvents().on('value', snapshot => {
            console.log(snapshot.val());
        });

Когда я добавляю строку кода ниже, это дает эту ошибку для обеих следующих функций: TypeError: this .db.ref (...). где не является функцией

Функция GetEvents показывает события в календаре. Функция updateEquipments создает новое оборудование

GetEvents = uid => {
                this.db.ref('events').where('ownerId', '==', uid).get();
            };

UpdateEquipments = id => {
            this.db.collection('equipments').doc(id);
        };

this.props.firebase.GetEvents(this.props.uid).then(querySnapshot => {
                querySnapshot.forEach(doc => {
                    newEvents.push(doc.data());
                    this.setState({
                        events: newEvents,
                    });
                });
            });


 createEquipment = ({ title, desc }) => {
        const { equipments } = this.state;
        const newEquipmentId = uuidV4();
        const updatedEquipment = {
            ...this.state.modal,
            id: newEquipmentId,
            ownerId: this.props.uid,
            title,
            desc,
        };
        const nextEquipments = [...equipments];
        nextEquipments.push(updatedEquipment);
        this.props.firebase
            .UpdateEquipments(newEquipmentId)
            .set(updatedEquipment)
            .then(
                this.setState({
                    equipments: nextEquipments,
                })
            )
            .catch(error => {
                console.error('Create New Equipment error', error);
            });
    };



    render() {
        if (this.state.events) {
            return (
                            <div className={'col-2'}>
                            Equipments:
                            <FloatingActionButton
                                mini={true}
                                className={'m-2'}
                                onClick={() => this.handleEquipments()}
                            >
                                <ContentAdd />
                            </FloatingActionButton>
                            <Sidebar
                                events={this.state.equipments}
                                onClickEvent={this.handleEquipments}
                            />
                        </div>
                        <div style={{ height: 500 }} className={'col-8'}>
                            <DragAndDropCalendar
                                events={this.state.events}                          
                                backend={false}
                            />
                            <Dialog
                                title="Task"
                                modal={false}
                                open={this.state.modalOpen}
                            >
                                <Modal
                                    event={this.state.modal}
                                    onRequestClose={this.handleClose}
                                />
                            </Dialog>
                            <Dialog
                                title="Equipments"
                                modal={false}
                                open={this.state.equipmentsOpen}
                                onRequestClose={this.handleClose}
                            >
                                <Modal
                                    event={this.state.modal}
                                    onRequestClose={this.handleClose}
                                    onCreatEvent={this.createEquipment}
                                />
                            </Dialog>                            
                        </div>
            );
        }
    }

Полный код: https://github.com/Tim1023/react-scheduler-firebase

Answer 1

Firebase содержит две базы данных:

• Исходная база данных реального времени, в которой хранятся данные в виде единого дерева JSON.
• Новое облачное хранилище Firestore, в котором хранятся данные в коллекциях и документы.

Обе базы данных являются частью Firebase, но они полностью разделены, и вы не можете использовать API для одной из них на другой.

И это именно то, что вы делаете здесь:

this.db.ref('events').where('ownerId', '==', uid).get();

Кажется, this.db.ref('events') для базы данных реального времени, но тогда .where('ownerId', '==', uid).get() - это код, который работает только в Cloud Firestore.

Решение придерживаться API и документации для базы данных реального времени, которую вы, похоже, действительно используете.