Проблемы с получением данных из пожарного магазина

Question

Так что это будет немного долго, но я постараюсь выпустить мою проблему довольно просто. Полный код моего компонента находится в конце между прочим.

Я учусь использовать аутентификацию Firebase и добавление и извлечение данных из Firebase Firestone в реакции. У меня настроена аутентификация, и это дает мне уникальный идентификатор, который я могу использовать для извлечения контента, который я добавил в режиме реального времени. Функция, которая прослушивает и извлекает данные в коде ниже, это listenForMessages (), которая находится внутри моего хука useEffect. Эта функция извлекает данные, обновляет состояние в хуке контента, который затем отображает данные в моем рендере. Проблема заключается в том, что прямо сейчас для получения данных мне нужно вставить уникальный идентификатор (jYAhV0xCtmOEJtOPXHirYXkQtju1) непосредственно в do c () внутри listenForMessages (). Это не идеально, так как я не могу жестко закодировать уникальный идентификатор. Поэтому я немного поменял вещи и передал уникальный идентификатор, полученный из моего приложения. js в качестве опоры в этот компонент. Благодаря приведенному ниже фрагменту кода уникальный идентификатор теперь передается в описанную ниже переменную usestate, что должно дать мне свободу использовать id в do c () таким образом = do c (id).

const [ id, setId ] = useState(props);

    useEffect(
        () => {
            setId(props.uid);
        },
        [ props ]
    );

Проблема в том, что он просто не работает: /

Когда я добавляю id в do c (), я встречаюсь с этим messege- FirebaseError: Function CollectionReference.do c () требует, чтобы его первый аргумент имел тип непустую строку, но это было: пользовательский объект Object

может кто-нибудь помочь? : /

const [ id, setId ] = useState(props);

    useEffect(
        () => {
            setId(props.uid);
        },
        [ props ]
    );

import React, { useState, useEffect } from 'react';
import fire, { db } from '../Config/firebase';

export default function Home(props) {
    function logout() {
        fire.auth().signOut();
    }

    const [ name, setName ] = useState('');
    const [ email, setEmail ] = useState('');
    const [ Content, setContent ] = useState([]);

    const [ id, setId ] = useState(props);

    useEffect(
        () => {
            setId(props.uid);
        },
        [ props ]
    );

    const sendData = () => {
        db
            .collection('users')
            .doc(props.uid)
            .set({
                name,
                email,
                id
            })
            .then(function() {
                console.log('Document successfully written!');
            })
            .catch(function(error) {
                console.error('Error writing document: ', error);
            });
    };


    const listenForMessages = () => {
        db.collection('users').doc('jYAhV0xCtmOEJtOPXHirYXkQtju1').onSnapshot(function(doc) {
            const allMessages = [];
            allMessages.push(doc.data());
            setContent(allMessages);
        });
    };

    useEffect(() => {
        listenForMessages();
    }, []);

    return (
        <div>
            <h1>I am home</h1>
            <button onClick={logout}>Log out</button>

            <h1>Enter information</h1>
            <form>
                <label>Name</label>
                <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
                <label>Email</label>
                <input type="text" value={email} onChange={(e) => setEmail(e.target.value)} />
            </form>
            <button onClick={sendData}>Send data</button>
            {Content.map((n) => (
                <p key={Math.floor(Math.random() * 10)}>
                    {n.name} {n.email}
                </p>
            ))}
        </div>
    );
}