diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/BreadcumbTitle.tsx b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/BreadcumbTitle.tsx
index 89abaf540..615f97b2c 100644
--- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/BreadcumbTitle.tsx
+++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/BreadcumbTitle.tsx
@@ -1,7 +1,7 @@
 import { RightOutlined } from '@ant-design/icons';
 import { useApp, useCompile, useDataSourceManager } from '@nocobase/client';
 import { Breadcrumb, Space, Tag } from 'antd';
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { DataSourceContext } from '../DatabaseConnectionProvider';
 import { NAMESPACE, lang } from '../locale';
@@ -14,26 +14,30 @@ export const BreadcumbTitle = () => {
   const dm = useDataSourceManager();
   const { displayName } = dm.getDataSource(name) || {};
   const { dataSource } = useContext(DataSourceContext);
-  const { status } = dataSource || dm.getDataSource(name);
-  const option = statusEnum.find((v) => v.value === status);
-  return (
-    <Breadcrumb
-      separator={<RightOutlined />}
-      items={[
-        { title: <Link to={app.pluginSettingsManager.getRoutePath(NAMESPACE)}>{lang('Data source manager')}</Link> },
-        {
-          title: (
-            <Space>
-              <span>{compile(displayName)}</span>
-              {status && (
-                <Tag key={status} color={option?.color}>
-                  {compile(option?.label)}
-                </Tag>
-              )}
-            </Space>
-          ),
-        },
-      ]}
-    />
-  );
+  const dataSourceValue = useMemo(() => dataSource || dm.getDataSource(name), [dataSource, name]);
+  const items = useMemo(() => {
+    const status = dataSourceValue?.status;
+    const option = statusEnum.find((v) => v.value === status);
+    const res = [
+      { title: <Link to={app.pluginSettingsManager.getRoutePath(NAMESPACE)}>{lang('Data source manager')}</Link> },
+    ];
+    if (dataSourceValue) {
+      res.push({
+        title: (
+          <Space>
+            <span>{compile(displayName)}</span>
+            {status && (
+              <Tag key={status} color={option?.color}>
+                {compile(option?.label)}
+              </Tag>
+            )}
+          </Space>
+        ),
+      });
+    }
+
+    return res;
+  }, [dataSourceValue]);
+
+  return <Breadcrumb separator={<RightOutlined />} items={items} />;
 };
diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/ViewDatabaseConnectionAction.tsx b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/ViewDatabaseConnectionAction.tsx
index 2150cb5e7..89bc7ec2f 100644
--- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/ViewDatabaseConnectionAction.tsx
+++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/ViewDatabaseConnectionAction.tsx
@@ -13,14 +13,15 @@ export const ViewDatabaseConnectionAction = () => {
   return (
     <div
       className={
-        !record.enabled &&
-        css`
-          .ant-btn-link {
-            &:hover {
-              color: rgba(0, 0, 0, 0.25) !important;
-            }
-          }
-        `
+        !record.enabled
+          ? css`
+              .ant-btn-link {
+                &:hover {
+                  color: rgba(0, 0, 0, 0.25) !important;
+                }
+              }
+            `
+          : undefined
       }
     >
       <Button