我有一个索引页，包含

getServerSideProps(){
//I am doing two api call
api1()
api2()
return{
props:{data:gotDataApi1, data2:gotDataApi2}
}
}

并且我正在传递给索引页内部的组件

<component1 gotData1={gotDataApi1} gotData2={gotDataApi2}/>

它工作正常。
现在我有了一个组件，它提供了调用下一个所需API的参数(关于用户交互)。在组件控件中，我添加了一个链接并传递了用户值

<Link 
  href={`indexpage?paths=${parameter1}/${parameter2}/${parameter3}`}>
</Link>

并在getServerSideProps(上下文)中接收这些参数，并用于调用另一个API调用正在进行的调用，但有时会出现错误拆分未定义

const {params, req, res, query} = context;
var str = query.paths;
cosole.log(str); // the output is 2022/1/1001
const splitStrings = await str.split("/ ");

我传递给API的拆分值如下所示
这是api3()调用const响应4=等待获取(http://localhost:3000/api/${splitStrings[0]}/${splitStrings[1]}/${splitStrings[2]})；const data4=等待响应4.json()；
这是我想要替换的

<component1 gotData1={gotDataApi1} gotData3={gotDataApi3}/>

我创建了一个[...slug].js页面，但在这里我也必须像这样呈现我的整个组件，索引页也包含SideMenu，我还必须在这里编写代码

<Side years={data2} chapters={data3} />
<component1 gotData1={gotDataApi1} gotData3={gotDataApi3}/>

[...slug].js页面也类似于我的索引页面。
我如何才能解决这个挑战。
我是否必须使用useEffect来调用api3并将值填充到Component1。而不是创建[...Slug]页面。或者，有没有任何标准的方式来应对这种挑战。
善意地做一些必要的事情。