diff --git a/web/app/components/workflow/hooks/use-nodes-sync-draft.ts b/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
index a390cde373..109635d7c3 100644
--- a/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
+++ b/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
@@ -21,7 +21,7 @@ export const useNodesSyncDraft = () => {
   const debouncedSyncWorkflowDraft = useStore(s => s.debouncedSyncWorkflowDraft)
   const params = useParams()
 
-  const getPostParams = useCallback(() => {
+  const getPostParams = useCallback((appIdParams?: string) => {
     const {
       getNodes,
       edges,
@@ -30,7 +30,7 @@ export const useNodesSyncDraft = () => {
     const [x, y, zoom] = transform
     const appId = useAppStore.getState().appDetail?.id
 
-    if (appId || params.appId) {
+    if (appId || appIdParams) {
       const nodes = getNodes()
       const hasStartNode = nodes.find(node => node.data.type === BlockEnum.Start)
 
@@ -55,7 +55,7 @@ export const useNodesSyncDraft = () => {
         })
       })
       return {
-        url: `/apps/${appId || params.appId}/workflows/draft`,
+        url: `/apps/${appId || appIdParams}/workflows/draft`,
         params: {
           graph: {
             nodes: producedNodes,
@@ -79,7 +79,7 @@ export const useNodesSyncDraft = () => {
         },
       }
     }
-  }, [store, featuresStore, params.appId])
+  }, [store, featuresStore])
 
   const syncWorkflowDraftWhenPageClose = useCallback(() => {
     const postParams = getPostParams()
@@ -92,8 +92,8 @@ export const useNodesSyncDraft = () => {
     }
   }, [getPostParams, params.appId])
 
-  const doSyncWorkflowDraft = useCallback(async () => {
-    const postParams = getPostParams()
+  const doSyncWorkflowDraft = useCallback(async (appId?: string) => {
+    const postParams = getPostParams(appId)
 
     if (postParams) {
       const res = await syncWorkflowDraft(postParams)
@@ -101,12 +101,12 @@ export const useNodesSyncDraft = () => {
     }
   }, [workflowStore, getPostParams])
 
-  const handleSyncWorkflowDraft = useCallback((sync?: boolean) => {
+  const handleSyncWorkflowDraft = useCallback((sync?: boolean, appId?: string) => {
     if (getNodesReadOnly())
       return
 
     if (sync)
-      doSyncWorkflowDraft()
+      doSyncWorkflowDraft(appId)
     else
       debouncedSyncWorkflowDraft(doSyncWorkflowDraft)
   }, [debouncedSyncWorkflowDraft, doSyncWorkflowDraft, getNodesReadOnly])
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 4b7ba8d237..64e43fa74f 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -7,6 +7,7 @@ import {
   useEffect,
   useMemo,
 } from 'react'
+import { useParams } from 'next/navigation'
 import { setAutoFreeze } from 'immer'
 import { useKeyPress } from 'ahooks'
 import ReactFlow, {
@@ -73,6 +74,7 @@ const Workflow: FC<WorkflowProps> = memo(({
   } = useNodesSyncDraft()
   const { workflowReadOnly } = useWorkflowReadOnly()
   const { nodesReadOnly } = useNodesReadOnly()
+  const params = useParams()
 
   useEffect(() => {
     setAutoFreeze(false)
@@ -83,8 +85,9 @@ const Workflow: FC<WorkflowProps> = memo(({
   }, [])
 
   useEffect(() => {
+    const appId = params.appId
     return () => {
-      handleSyncWorkflowDraft(true)
+      handleSyncWorkflowDraft(true, appId as string)
     }
   }, [])