diff --git a/src/composables/use-height.ts b/src/composables/use-height.ts
index 3120dd8e7..523ae4735 100644
--- a/src/composables/use-height.ts
+++ b/src/composables/use-height.ts
@@ -1,8 +1,8 @@
 import { useRect } from '@vant/use';
 import { Ref, ref, onMounted, nextTick } from 'vue';
 
-export const useHeight = (element: Element | Ref<Element>) => {
-  const height = ref();
+export const useHeight = (element: Element | Ref<Element | undefined>) => {
+  const height = ref<number>();
 
   onMounted(() => {
     nextTick(() => {
diff --git a/src/composables/use-placeholder.tsx b/src/composables/use-placeholder.tsx
index 330c0c9d3..13f58b9ab 100644
--- a/src/composables/use-placeholder.tsx
+++ b/src/composables/use-placeholder.tsx
@@ -2,7 +2,7 @@ import { useHeight } from './use-height';
 import type { Ref } from 'vue';
 import type { BEM } from '../utils/create/bem';
 
-export function usePlaceholder(contentRef: Ref<Element>, bem: BEM) {
+export function usePlaceholder(contentRef: Ref<Element | undefined>, bem: BEM) {
   const height = useHeight(contentRef);
 
   return (renderContent: () => JSX.Element) => (
diff --git a/src/nav-bar/index.tsx b/src/nav-bar/index.tsx
index 349a8e274..6168e1166 100644
--- a/src/nav-bar/index.tsx
+++ b/src/nav-bar/index.tsx
@@ -31,7 +31,7 @@ export default createComponent({
   emits: ['click-left', 'click-right'],
 
   setup(props, { emit, slots }) {
-    const navBarRef = ref();
+    const navBarRef = ref<HTMLElement>();
     const renderPlaceholder = usePlaceholder(navBarRef, bem);
 
     const onClickLeft = (event: MouseEvent) => {
diff --git a/src/notice-bar/index.tsx b/src/notice-bar/index.tsx
index 11fa6c935..9745f9ecc 100644
--- a/src/notice-bar/index.tsx
+++ b/src/notice-bar/index.tsx
@@ -46,8 +46,8 @@ export default createComponent({
     let contentWidth = 0;
     let startTimer: NodeJS.Timeout;
 
-    const wrapRef = ref();
-    const contentRef = ref();
+    const wrapRef = ref<HTMLElement>();
+    const contentRef = ref<HTMLElement>();
 
     const state = reactive({
       show: true,
diff --git a/src/popup/index.tsx b/src/popup/index.tsx
index e025c31cb..04da9cd93 100644
--- a/src/popup/index.tsx
+++ b/src/popup/index.tsx
@@ -112,7 +112,7 @@ export default createComponent({
     let shouldReopen: boolean;
 
     const zIndex = ref<number>();
-    const popupRef = ref();
+    const popupRef = ref<HTMLElement>();
 
     const [lockScroll, unlockScroll] = useLockScroll(
       popupRef,
diff --git a/src/pull-refresh/index.tsx b/src/pull-refresh/index.tsx
index 1453c7eae..c1db311d2 100644
--- a/src/pull-refresh/index.tsx
+++ b/src/pull-refresh/index.tsx
@@ -52,7 +52,7 @@ export default createComponent({
   setup(props, { emit, slots }) {
     let reachTop: boolean;
 
-    const root = ref();
+    const root = ref<HTMLElement>();
     const scrollParent = useScrollParent(root);
 
     const state = reactive({
diff --git a/src/stepper/index.tsx b/src/stepper/index.tsx
index efa1d7a01..a9a956c9f 100644
--- a/src/stepper/index.tsx
+++ b/src/stepper/index.tsx
@@ -127,7 +127,7 @@ export default createComponent({
     };
 
     let actionType: 'plus' | 'minus';
-    const inputRef = ref();
+    const inputRef = ref<HTMLInputElement>();
     const current = ref(getInitialValue());
 
     const minusDisabled = computed(
diff --git a/src/toast/index.tsx b/src/toast/index.tsx
index 7bf1d6360..e5d5dd61d 100644
--- a/src/toast/index.tsx
+++ b/src/toast/index.tsx
@@ -65,7 +65,7 @@ function parseOptions(message: string | ToastOptions): ToastOptions {
 function createInstance() {
   const { instance, unmount } = mountComponent({
     setup() {
-      const message = ref();
+      const message = ref('');
       const { open, state, close, toggle } = usePopupState();
 
       const onClosed = () => {