Блог

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

 const { id } = useParams()

useEffect(() => {
    db.collection("posts").doc(id).get().then(doc => {
        const newData = doc.data();
        console.log(newData);
    });
}, []);

return (
    <div className="log">
            <article className="log-details">
                <div className="author-pic clearfix">
                    <img src={profile} alt="" />
                </div>
                <div className="log-preview">
                    <div class="cover"></div>
                    <h2 className="title clearfix">title here</h2>

                    <div className="details ">
                        <img src={One} alt="" />
                        <p className="essay">essay here</p>
                    </div>
                </div>
            </article>
    </div>
)
 

Для отображения данных post используйте useState и задайте значение postData setPostData(newData) . Затем вы можете прочитать значения postData с {postData.title} {postData.essay} помощью оператора return и в нем.

Не забудьте импортировать useState с import React, { useState, useEffect } from "react" помощью .

 const { id } = useParams()
const [postData, setPostData] = useState("");

useEffect(() => {
    db.collection("posts").doc(id).get().then(doc => {
        const newData = doc.data();
        setPostData(newData);
        console.log(newData);
    });
}, []);

return (
    <div className="log">
            <article className="log-details">
                <div className="author-pic clearfix">
                    <img src={profile} alt="" />
                </div>
                <div className="log-preview">
                    <div class="cover"></div>
                    <h2 className="title clearfix">{postData amp;amp; postData.title}</h2>

                    <div className="details ">
                        <img src={One} alt="" />
                        <p className="essay">{postData amp;amp; postData.essay}</p>
                    </div>
                </div>
            </article>
    </div>
)