Reactjs 将获取的数据传递给react组件

我正在使用getServerSideProps在服务器端获取数据。数据提取工作正常。我想将获取的数据传递给一个名为UserForm的组件。这是我的密码

// This gets called on every request
export async function getServerSideProps(context) {
    // Fetch data from external API
    const { id } = context.query;
    const res = await fetch(`http://localhost:3001/v1/firm/${id}`)
    const data = await res.json()

    // Pass data to the page via props
    return { props: { data } }
}

function ComingSoon({ data }) {

    const router = useRouter()
    const { id } = router.query

    return (
        <div className="coming-soon-area">
            <TopHeader />
            <NavbarStyleFive />
            <UserForm data = {data}/>
            <Footer />
        </div>
    )
}

export default ComingSoon;

//每次请求都会调用它
导出异步函数getServerSideProps（上下文）{
//从外部API获取数据
const{id}=context.query；
const res=等待取数(`http://localhost:3001/v1/firm/${id}`）
const data=await res.json（）
//通过道具将数据传递到页面
返回{props:{data}}
}
函数即将到来（{data}）{
const router=useRouter（）
const{id}=router.query
返回(
)
}
出口违约即将来临；

这是UserForm的内容

import React from 'react';
const UserForm = (data) => {
    return (
        <div className="coming-soon-area">
            <h2>{data[0].name} coming soon</h2>
        </div>
    )
}
export default UsernForm;

从“React”导入React；
const UserForm=（数据）=>{
返回(
{data[0].name}即将到来
)
}
导出默认UsernForm；

我在UserForm中得到一个错误，告诉我数据未定义。你知道这个问题吗

编辑： 数据不是未定义的，此代码工作正常。我认为问题在于访问UserForm中的数据道具

    <div className="coming-soon-area">
        <TopHeader />
        <NavbarStyleFive />
        <h2>{data[0].name} coming soon</h2>
        <Footer />
    </div>

{data[0].name}即将到来
考虑到来自api的
数据
是异步的，React可以在
数据
可用之前尝试呈现
UserForm
。为了避免这种情况，您可以修改
UserForm
如下：

import React from 'react';
  const UserForm = ({ data }) => {
  return (
    <div className="coming-soon-area">
        {data && data.length > 0 && <h2>{data[0].name} sofort kündigen</h2>}
    </div>
  )
}
export default UsernForm;

从“React”导入React；
const UserForm=（{data}）=>{
返回(
{data&&data.length>0&&{data[0].name}sofort kündigen}
)
}
导出默认UsernForm；

这样，只有<代码>数据< /代码>是有效的而不是空的，<代码>数据[0 ]。No.<代码>将显示。
在访问之前，总是考虑检查获取的数据。
数据
最初是
未定义的
，即处于初始
装载状态
。
而且，当
未定义时，不需要空值或空值，您有很多方法可以防止这种情况。您可以使用条件语句，甚至
应用程序不再崩溃，但不幸的是数据[0]。名称从未显示，因此组件上的数据值似乎始终为空。并且api调用在服务器端完成，因此向用户显示数据时不能为空；）不幸的是，我看不到
数据
形状。但是试一下像
data.data
（通常是这样的…）这样的东西。如果我从“const UserForm=（data）=>{”中删除数据，数据是未定义的。所以我认为我在UserForm中访问数据的方式是错误的。是的，我也这么认为。你能给我看
data
console.log吗？