diff --git a/ui/src/views/report/DevexpressReportDesigner.tsx b/ui/src/views/report/DevexpressReportDesigner.tsx
index 06c20630..72293597 100644
--- a/ui/src/views/report/DevexpressReportDesigner.tsx
+++ b/ui/src/views/report/DevexpressReportDesigner.tsx
@@ -12,8 +12,12 @@ import { useParams } from 'react-router-dom'
 
 const DevexpressReportDesigner: React.FC = () => {
   const { translate } = useLocalization()
-  const params = useParams()
+  const { id } = useParams<{ id: string }>()
 
+  if (!id) {
+    return null
+  }
+  
   return (
     <Container>
       <Helmet
@@ -22,9 +26,9 @@ const DevexpressReportDesigner: React.FC = () => {
         defaultTitle="Erp Platform"
       ></Helmet>
 
-      <ReportDesigner reportUrl={params?.id ?? ''}>
+      <ReportDesigner reportUrl={id}>
         <RequestOptions
-          host={import.meta.env.VITE_API_URL + '/'}
+          host={`${import.meta.env.VITE_API_URL}/`}
           getDesignerModelAction="DXXRD/GetDesignerModel"
         />
       </ReportDesigner>
diff --git a/ui/src/views/report/DevexpressReportViewer.tsx b/ui/src/views/report/DevexpressReportViewer.tsx
index 0b281ea7..b7f8b465 100644
--- a/ui/src/views/report/DevexpressReportViewer.tsx
+++ b/ui/src/views/report/DevexpressReportViewer.tsx
@@ -11,7 +11,11 @@ import { useParams } from 'react-router-dom'
 
 const DevexpressReportViewer: React.FC = () => {
   const { translate } = useLocalization()
-  const params = useParams()
+  const { id } = useParams<{ id: string }>()
+
+  if (!id) {
+    return null
+  }
 
   return (
     <Container>
@@ -21,8 +25,8 @@ const DevexpressReportViewer: React.FC = () => {
         defaultTitle="Erp Platform"
       ></Helmet>
 
-      <ReportViewer reportUrl={params?.id ?? ''}>
-        <RequestOptions host={import.meta.env.VITE_API_URL + '/'} invokeAction="DXXRDV" />
+      <ReportViewer reportUrl={id}>
+        <RequestOptions host={`${import.meta.env.VITE_API_URL}/`} invokeAction="DXXRDV" />
       </ReportViewer>
     </Container>
   )