Javascript 如何将Firebase中的数据提取到React应用程序中

拜托，我是React.js的新手，我面临的挑战是从Firebase获取约会信息来填充它。我希望能够取得一个单一的财产，而不是所有的-例如（标题，正文和价格）

useFetch是我在项目内部创建的一个自定义钩子，用于处理从firebase获取的内容

const CourseDetails = () => {
    const { id } = useParams();
    const { data:details, isLoading } = useFetch('http://localhost:8000/courses/' + id);
    console.log(details)

        return (
        <div className="course-detail">
                {isLoading && <div>Loading...</div>}
                {details && <div>{details.body}</div> }

        </div>
    )
}

export default CourseDetails

请问我在这里没有得到什么

import { useParams } from 'react-router-dom';
import useFetch from '../UseFetch';
import '../courseDetails/CourseDetails.css';
import { useState, useEffect } from 'react';

import React from 'react'

const CourseDetails = () => {
    const { id } = useParams();
    const { data:details, isLoading } = useFetch('https://tutorialwebsite-460f1-default-rtdb.firebaseio.com/courses.json');
    console.log(details);
    return (
        <div className="course-detail">
            <h2>{ id }</h2>
            <div>
                <p>{details.description}</p>
            </div>
        </div>
    )
}

export default CourseDetails

---

我如何访问

说明
？
谢谢大家的回复，但我能够解决我的问题。因此，我所做的是变成了一个使用过的假json api，而不是我最初使用的firebase。然后，在从firebase获取数据后，我能够基于唯一id动态路由到特定页面，然后使用条件呈现在页面上输出数据。然而，我很想知道如何使用firebase实现这一点


const CourseDetails = () => {
    const { id } = useParams();
    const { data:details, isLoading } = useFetch('http://localhost:8000/courses/' + id);
    console.log(details)

        return (
        <div className="course-detail">
                {isLoading && <div>Loading...</div>}
                {details && <div>{details.body}</div> }

        </div>
    )
}

export default CourseDetails



const CourseDetails=（）=>{
const{id}=useParams（）；
const{data:details，isLoading}=useFetch（'http://localhost:8000/courses/“+id）；
console.log（详细信息）
返回(
{isLoading&&Loading…}
{details&&{details.body}
)
}
导出默认课程详细信息
您的useFetch是什么样子的？让我更新这个问题以包括useFetch。您不能只获取一个属性，除非服务器支持。您必须获取整个JSON，然后解析它并提取所需的数据。还请说明您的代码到底是如何失败的，因为我不确定问题到底是什么。你在那一段中看到了什么？您是否收到错误消息？您的数据最初是
[]
，但您正在加载一个对象（
{…}
）。此外，当您尝试渲染
详细信息时，应使用基于
isLoading
的条件渲染。说明
，因为这可能会导致“无法读取未定义的x”错误。这里的关键是如何访问数据中任意名称的唯一属性。您需要的是
Object.values（data）[0]。description